उद्देश्य 
इस अध्याय को पूरा करने के बाद छात्र यह 
करने में सक्षम होंगे- 


एचटीएमएल टैग एवं उसकी 
विशेषताओं की पहचान करने में, 
वेब पेज विकसित करने के लिए 
एचटीएमएल टेग एवं विशेषताओं 
का प्रयोग करने में, 

पाठ एवं इमेज की रूपरेखा तैयार 
करने, ले-आउट बनाने, सारणी 
बनाने, सूची बनाने तथा हाइपरलिंक 
सुजित करने के लिए एचटीएमएल 
टैग एवं इसकी विशेषताओं का 
प्रयोग करने में, 

वेब पेज में पारस्परिक क्रिया 
शामिल करने के लिए 
एचटीएमएल फॉर्मों का प्रयोग करने 
में, और 

एचटीएमएल के प्रयोग से वेबसाइट 
को डिजाइन एव निर्मित करने में। 





“तर्क से आप एक स्थान से दूसरे स्थान तक पहुंच सकते हें 
लेकिन कल्पना से आप कहीं भी पहुंच सकते हैं। ”” 
अल्बर्ट आइस्टीन 


| | 


F च जज रे ® ए 
प्रस्तावना 
जैसे कि हम पहले पढ़ चुके हैं कि इंटरनेट विश्व भर में फैले 
कम्प्यूटरों का एक बड़ा नेटवर्क है। इंटरनेट से इन कम्प्यूटरों से 
सूचना प्राप्त की जा सकती है और सूचना भेजी भी जा सकती है। 
वर्ल्ड वाइड वेब इंटरनेट का एक प्रमुख अनुप्रयोग है। वर्ल्ड वाइड 
वेब अर्थात्‌ वेब प्रलेखों, इमेज, ऑडियो, वीडियो फाइलों या 

सॉफ्टवेयर फाइलों का अंतर-संयोजित सेट है। 

जब आप इंटरनेट पर जाते हैं और आसपास देखते हैं (इसे हम 
ब्राउजिंग कहते हैं) तो आप वेब हाइपरलिंक जैसी बेहतरीन 
विशेषताओं का प्रयोग कर रहे होते हैं। जब भी आप टेक्स्ट या 
इमेज के रेखांकित भाग पर क्लिक करते हैं, आप टेक्स्ट या इमेज 
के अन्य भाग पर पहुंच जाते हैं और यह विश्व में किसी अन्य 
कम्प्यूटर के पेज पर या समान हार्ड डिस्क पर किसी अन्य पेज 
या समान पेज पर हो सकता है। 

यह कैसे कार्य करता है और हम इससे कैसे कार्य कर सकते 
हैं, यह हम इस अध्याय में पढ़ेंगे। वेब पेज के लिए हाइपर टेक्स्ट 
मार्कअप लैंग्वेज (एचटीएमएल) का प्रयोग करते हैं। ब्राउजर 
अनुप्रयोगों (माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर, मॉजिला फायरफॉक्स 
इत्यादि) को टेक्स्ट, इमेज को डिस्प्ले करने एवं एचटीएमएल को 


कम्प्यूटर और संचार प्रौद्योगिकी 


समझने के लिए डिज़ाइन किया गया हे तथा हाइपरलिंक्स द्वारा वेब को नेवीगेट किया जा 
सकता है। 


9.। एचटीएमएल का परिचय 


आइए वेब पेज (चित्र 9.]) देखें और इसकी विशेषताओं का विश्लेषण करें। इस वेब पेज का 
निम्नलिखित प्रमुख भाग है- 


> National Council of Educational Research and Training :: Home - Mozilla Firefox 
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ट now you have come out of the conventional ideas of a computer whether in regard to its with respect to its physical 
appearance or itsand functionalities and seen the multifarious fields of activities in which the principle is operative irrespective of 
the physical appearances of the device. With electronic devices becoming ubiquitous, it is important to know and understand 
the latest trends and anticipate what is coming in the near future. Tt is a process of continuous evolution, constantly updating and 
improving in efficiency and functionality. 


APPLICATION SOFTWARE 


Software development has become a more systematic process where a great emphasis is laid on finding out the user 
equirement, preparing a prosess model, demonstrating an early yersion to is customers (prototyping) and on trying to ensure 
that the software is free of errors. Moreover, an incremental software development process is followed where a project 
proceeds in small and manageable steps. 





There are enormous number of application software catering to our needs. The capabilities are increasing day by day as per हे 
needs. Grossly we can place these in following categories according to their uses : 











® Educational and communication software 

® Design, media and simulation software 

® Office automation and process mangement software 
® Control and analysis software 














Hardware 
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चित्र 9. - हमारा वेब पेज 


हेडर एरिया - उदाहरण में इसमें मास्टर हेडर है, जो वेब पेज के विषय को निर्दिष्ट 
करता है। इसमें पेज के उद्देश्य के आधार पर चित्र, लोगो इत्यादि भी होते हैं। 
मैन्यू बार - यह लिंक्स का सेट है जो बटन की तरह होता है। प्रत्येक लिंक्स आपको 


वेब पेज के अलग भाग पर ले जाता है। एक प्रकार से यह पुस्तक में अध्याय के 
शीर्षकों के समान है। 





एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


° पेज का मुख्य भाग - पेज के इस भाग में सभी विषय जो भी आप प्रस्तुत करना 
चाहते हैं, शामिल होते हैं। विषय विभिन्न प्रकार के टेक्स्ट, इमेज, सारणियों, रूपों, 
इत्यादि के रूप में हो सकता है। हमने पेज को दो कॉलम में व्यवस्थित किया है। बाएं 
कॉलम में टेक्स्ट जो विभिन्न तरह के फॉमेंटों में है, को सम्मिलित करते हैं और दाएं 
कॉलम में वेब पेज की कुछ विशिष्ट विशेषताएं हैं जैसे- लिंक्स, इमेज जो गैलरी से 
लिंक करती हैं, कमेंट फॉर्म एवं पोल सम्मिलित हैं। ये विशेषताएं पेज को पारस्परिक 
क्रियात्मक बनाती हैं। 

° फुटर एरिया - यह पेज पर सबसे नीचे होता है और इसमें सामान्यतः डिस्क्लेमर 
कॉपीराइट सूचनाएं इत्यादि होती हैं। हमारे मामले में फुटर टेक्स्ट में उल्लेख है कि '“इस 
साइट पर सभी सामग्री निःशुल्क डाउनलोड, वितरित या पुनः प्रयोग की जा सकती है।'' 

हम पेज और इसके खंडों का विश्लेषण आगे करेंगे। हम यह भी सीखेंगे कि ऐसे वेब पेज 
कैसे निर्मित किए जा सकते हैं। अपने ज्ञान को बढ़ाने के क्रम में, भिन्न-भिन्न प्रकार के वेब 
पेजों को देखें और हर बार विषय की रूपरेखा और वर्गीकरण को नोट करें। वेब पेज डिज़ाइन 
एक बहुत ही बेहतरीन कार्यकलाप है, जहां पर कलाकार और प्रोग्राम साथ कार्य करते हैं और 
वेब पेज को प्रतिक्रियात्मक बनाने के लिए विस्तृत विशेषताओं को एक साथ रखते हैं। 

जैसा कि हमने प्रस्तावना में उल्लेख किया है कि आपको वेब पेज देखने के लिए 
अनुप्रयोग सॉफ्टवेयर, जिसे इंटरनेट ब्राउजर कहते हैं, की आवश्यकता होती है। यद्यपि सभी 
ब्राउज़र एचटीएमएल में कार्य करने एवं वेब पेज डिस्प्ले करने के लिए डिजाइन किये गए 
हैं, तथापि उन्हें विभिन्न प्रचालन प्रणालियों हेतु डिजाइन किया जा सकता है। आप अपने 
कम्प्यूटर पर कई ब्राउजर संस्थापित करा सकते हैं। अधिकतर ब्राउजर निःशुल्क हैं और वेब 
से भी डाउनलोड किए जा सकते हैं। कुछ लोकप्रिय ब्राउजरों की सूची निम्नलिखित है- 


माइक्रोसॉफ्ट विंडोज, लिनेक्स या एपल्स मैकोस (४४८०5) 
इंटरनेट एक्सप्लोरर माइक्रोसॉफ्ट विंडोज 


माइक्रोसॉफ्ट विंडोज और एपल्स मैकोस 


इस अध्याय में आप कई ब्राउजर कमांडों के बारे में जानेंगे। प्रत्येक प्रकार के ब्राउजर में 
कमांड के बारे में जानना कठिन होगा। इसीलिए हम मॉजिला फायरफॉक्स और इसको कमांड को 
देखेंगे। प्रत्येक ब्राउज़र की कमांड समान उद्देश्य के लिए होगी। लेकिन इन्हें विभिन्न श्रेणियों में 
रखा जा सकता है या और कुछ कहा जाता है। इसीलिए जब हम कमांड का उल्लेख करते हैं तो 
देखें कि आप इंटरनेट एक्सप्लोरर, क्रोम या ओपेरा में समान कार्य कैसे करेंगे। 











कम्प्यूटर और संचार प्रौद्योगिकी 


प्रत्येक एचटीएमएल फाइल (जिसे वेब पेज कहा जाता है) एक टेक्स्ट फाइल है। इसमें 
इमेज, आवाज या ऐसी सूचनाएं नहीं होती हैं। एचटीएमएल फाइल में अतः जब आप वेब पेज 
पर फोटोग्राफ़ देखते हैं तो एचटीएमएल फाइल इमेज फाइल खोलती है और इसे वेब पेज पर 
समुचित फाइल पर प्रदर्शित करती है। चूंकि यह एक टेक्स्ट फाइल है, इसलिए यह प्लेटफॉर्म 
इन्डिपेंडेंट है अर्थात्‌ इस वेब पेज को विन्डोज, यूनिक्स, लिनेक्स अथवा मैकोस कम्प्यूटर पर 
देखा जा सकता है। यही कारण है कि वेब पेज संचार के वैश्विक माध्यम के रूप में उभर 
कर सामने आ रहा है। 

हमने उल्लेख किया था कि एचटीएमएल कोड से वेब पेज चलता है। इस कोड की सहायता 
से ही ब्राउजर वेब पेज तैयार करता है। लेकिन, आप एचटीएमएल कोड कैसे देखेंगे? पेज पर 
दायीं ओर क्लिक करें और दिए गए विकल्पों में से व्यू पेज सोर्स को सलेक्ट करें। आप अब 
एचटीएमएल कोड देखें। यह बड़ा डरावना दिख सकता है लेकिन हम आश्वासन दिलाते हैं कि 
यह बहुत साधारण है और आप इस अध्याय के अंत तक इसे लिखने में सक्षम होंगे। 


9,2 एचटीएमएल टैग्स 


आपके एचटीएमएल कोड में क्या होता है? इसमें वेब पेज की विषय-वस्तु के प्रत्येक तत्त्व 
को कैसे और कहां प्रदर्शित करना है इसके बारे में जानकारी और यदि आप सूचना इनपुट देते 
हैं अथवा लिंक पर क्लिक करते हैं तो क्या करना है, इत्यादि का ब्योरा होता है। अन्य शब्दों 
में एचटीएमएल पेज में कंटेंट प्रोग्रामिंग और डिजाइन एलीमेंट्स होते हैं। 

एचटीएमएल कोड का मूल तत्त्व टैग है। आइए अपने वेब पेज के कोड देखें (चित्र 9.2)। 
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चित्र 9.2 - हमारे वेब पेज का स्रोत देखें 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


पेज के शीर्ष पर <॥४०।> कोड देखें। यदि हम पेज नीचे की ओर स्क्रॉल करेंगे तो हम 
</hm!> कोड देखेंगे। ऐसे कोड को टैग कहते हैं। वेब पेज बनाना सीखने का अर्थ है इन 
टैग्स का प्रयोग करना सीखना और विषय-वस्तु को अपने अनुसार प्रस्तुत करना। एचटीएमएल 
का सामान्य फॉर्मेट निम्न है- 

<tag_name> affected text </tag_name> 

प्रारंभ टैग में केवल टैग का नाम होता है और यह टेक्स्ट फॉमेटिंग आरंभ करने के लिए 
वेब ब्राउजर को दिशा-निर्देश देता है। अंतिम टैग में टैग के नाम से पहले स्लेश (/) होता 
है। यह ''/'' (स्लेश) वेब ब्राउजर से टेक्स्ट टैगिंग (फॉमेंटिंग) समाप्त करने के लिए कहता 
है। हम कुछ उदाहरण देखते हैं- 

यदि आप अपने टेक्स्ट को रेखांकित करना चाहते हैं तो बोल्ड फेस का प्रयोग करते हुए 
निम्न का प्रयोग करें- 

<b> HTML tags </b> 

और फिर वेब पेज पर एचटीएमएल टैग आता है। टेग मामले के अनुसार नहीं होता 
अर्थात्‌, जैसे कि, <B> एचटीएमएल टैग </3> समान परिणाम ही देगा। एचटीएमएल टैग 
का बढ़िया पहलू यह है कि यदि ब्राउजर को नहीं पता हो कि दिए गए टैग से क्या करना 
है, तो वह उसे अनदेखा कर देगा। 
टैग दो प्रकार के होते हैं- 

१ कंटेनर टैग- एचटीएमएल टैग जिसमें समापन टैग कि आवश्यकता होती है, को कंटेनर 
टैग कहते हैं। इन टैग को युग्म या रैपर टैग भी कहा जाता है। <> टेक्स्ट </> एक 
ऐसा ही जोड़ा है। यदि आप ऐसे टैग को बंद नहीं करते हैं, तो सभी अनुवर्ती टेक्स्ट 
इसके भाग के रूप में माने जाएगे। 

° नॉन-कटेनर टैग- एचटीएमएल टैग जिसमें समापन टैग की आवश्यकता नहीं होती है, 
उसको नॉन-कटेनर टैग कहते हैं। इन टैग को एकल या एम्प्टी टैग भी कहते हैं। इसका 
विशिष्ट उदाहरण <}7> है। यह टैग लाइन ब्रेक को अंतःस्थापित करता है। 


9.2.। विशेषताएं 


कुछ टैग अपने आप में पूर्ण होते हैं। दूसरे शब्दों में, उनमें केवल एक ही विकल्प होता है। उदाहरण 
के लिए, जब आप अपना टेक्स्ट इटेलिक्स में चाहते हैं, तो आप <।> टेक्स्ट </> का प्रयोग करें। 
लेकिन यदि आप टेक्स्ट किसी विशेष फोंट में डिस्प्ले करना चाहते हैं, तब टैग कैसे दिखेगा? 

<font face="Arial”"> text</font> 

उदाहरण <F0nt> </F 0४> में टैग को देखें। शेष भाग का क्या हुआ, फेस = '* एरियल'', 
हम इस अतिरिक्त सूचना को टैग की विशेषता के रूप में लेंगे। इसीलिए हमारे उदाहरण में, टैग 
फोंट है, इसकी विशेषता फेस है और विशिष्ट गुण को दिया गया मान एरियल है। 

विशेषताओं में कई भिन्न-भिन्न मान होते हैं जो आप एक साथ प्रयोग कर सकते हैं। 
उदाहरण के लिए हो सकता है आपको एक विशिष्ट फोंट ही पसंद न हो, बल्कि शब्दों का 








कम्प्यूटर और संचार प्रौद्योगिकी 
एक विशेष आकार और विशेष रंग पसंद है। आप ऐसा कैसे करेंगे? अब टैग होगा- 


<font face="Arial”; size=l4px; color=#ff0000">text </font> 

मान दर्शाने के लिए उद्धरणों और विशेषताओं को अलग करने के लिए अरद्ध-विराम के 
प्रयोग को नोट करें; टैग का सामान्य प्रकार है- 

<tag_name attribute-name = “attribute-value">....</ tag_name> 

सामान्य नियम के अनुसार, अधिकांश विशेषताओं जिसमें केवल शब्द, अंक, हाइफ़न या पीरियड 
होते हैं, में उद्धरणों की आवश्यकता नहीं होती। जिन विशेषताओं के अन्य घटक जैसे- स्पेस, % 
चिहन, या # चिहन, होते हैं उनमें हमेशा उद्धरणं की आवश्यकता होती है। फिर भी, यह एक अच्छी 
आदत है कि विशेषताओं के मान को उद्धरणों में संलग्न किया जाए। 

विशेषताओं का लक्ष्य टैग के क्षेत्र को विस्तृत करना है। यह ब्राउजर को, टेग के बारे में 
अतिरिक्त सूचना उपलब्ध कराता है। 

ब्राउजर उस टैग पर कैसे कार्य करेगा जिसमें विशेषताओं को आवश्यकता है, लेकिन 
किसी भी विशेषता का उल्लेख न हो। उदाहरण के लिए यदि हमने केवल <F0॥।> टेक्स्ट 
</F0n> का प्रयोग किया, तो ब्राउजर इसे कैसे दिखाएगा। इसे जानने का सबसे अच्छा 
तरीका है कि आप स्वयं इसे करने का प्रयास करें। 

प्रत्येक ब्राउजर में डिफॉल्ट सेटिंग होती है, जो कि वह मान है जब कोई अन्य मान 
परिभाषित न हो। विंडोज इंटरनेट एक्सप्लोरर में, डिफॉल्ट फोंट सेटिंग *फोंट': टाइम्स न्यू 
रोमन; फोंट-साइज : ।2६ और कलर :#000000 है। यदि आपके पास केवल किसी 
विशेषता के बिना केवल <F०॥> टेक्स्ट </F०॥> टैग है, तब टेक्स्ट में 27। में टाइम्स 
न्यू रोमन फोंट में होगा और इसका रंग काला होगा। यद्यपि आप जैसे चाहें इस डिफॉल्ट सैटिंग 
को बदल सकते हैं। टूल्स -> इंटरनेट विकल्प पर जाएं और सामान्य टैब के अंतर्गत फोंट 
बटन पर क्लिक करें। यहां कई अन्य डिफॉल्ट हैं और इनमें से आप किसी एक को या सभी 
को अपने ब्राउज़र को अपनी आवश्यकतानुसार बनाने के लिए सेट कर सकते हैं। 


9,3 एचटीएमएल प्रलेख की संरचना 


परवर्ती खंड में, हमने जो वेब पेज बनाया (चित्र 9.।) है, उसका विश्लेषण करेंगे और इस 
प्रक्रिया में विभिन्न एचटीएमएल टैगों के बारे में जानेंगे! आइए वेब पेज की एचटीएमएल कोडिंग 
देखें। पेज पर दाई ओर क्लिक करें और देखें (व्यू) पेज स्रोत (चित्र 9.2) का विकल्प चुनें। 

प्रोग्रामिंग की मूल संकल्पना व्यवस्थित फॉर्मेट में कोड प्रस्तुत करना है। यह न केवल पढ़ने 
में आसान है, अपितु त्रुटियों का पता लगाने और उन्हें दूर करने में भी मदद करता है। 
एचटीएमएल में, हम यह निम्न रूप से करते हैं। 

संपूर्ण एचटीएमएल प्रलेख टैग <॥०।> और </#077> के युग्म के बीच होता है। दूसरे 
शब्दों में, जब इन्हें दो टैगों के मध्य रखा जाता है, तो ब्राउजर पेज को वेब पेज के रूप में देखता है। 

तत्पश्चात्‌ पेज के खंडों को परिभाषित किया जाता है। हमारे पेज में हमारे पास हेडर, बॉडी 
और फुटर हैं और <॥९३०></९३4> एवं <b०d५> </D०१$> टैग हैं। 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 
इसीलिए एचटीएमएल पेज निम्नवत्‌ दिखाई देता है- 


<html> 
<head> 
Instructions for the JDrowser goes here; 
</head> 


<body> 
Everything on the web page goes here; 
</body> 
</html> 





वेब पेज के सभी विषय जिन्हें ब्राउजर विंडो में डिस्प्ले किया गया है <body> </body> 
टैग के मध्य हैं। हमारे वेब पेज में, निम्नलिखित को सम्मिलित किया गया है- 
* रंगीन पृष्ठभूमि में बैनर कम्प्यूटर एवं संचार प्रौद्योगिकी; 
* प्रत्येक अध्याय के लिए बटन सहित मैन्यू बार; 
° बाएं कॉलम में सभी टेक्स्ट, रंगीन पृष्ठभूमि सहित; 
° हाइपरलिंक्स का सेट; 
° दो इनपुट बॉक्स; और 
° फुटर 
हम अनुवर्तती खंडों में इनमें से प्रत्येक से संबद्ध टेगों के बारे में जानेंगे। 


9,4 कोडिंग से आरंभ करना 


हमें किन उपकरणों की आवश्यकता है? 


एचटीएमएल प्रलेख निर्मित करने के लिए हमें दो मूल उपकरणों की आवश्यकता है- 

. एचटीएमएल संपादक, एचटीएमएल प्रलेखों को निर्मित करने और सुरक्षित रखने हेतु 
विंडोज के लिए नोट पैड या वर्ड पैड, यूनिक्स हेतु वीआई, और मैकिनटोश हेतु 
टीचटेक्स्ट, टेक्स्ट संपादक के अच्छे उदाहरण हैं। कई उन्नत और विशेषताओं वाले 
एचटीएमएल संपादक उपलब्ध हैं लेकिन टेक्स्ट संपादक हमारे उद्देश्य हेतु पर्याप्त होगा। 







नोट - वर्ड प्रोसेसर जैसे ओपन ऑफिस ओर्ग राइटर या माइक्रोसॉफ्ट वर्ड का प्रयोग न करें। ये अनुप्रयोग 
फॉर्मेटिंग हेतु कई अदृश्य कोड उत्पन्न करते हैं, जो ब्राउजर की क्षमता से परे हैं। लेकिन यदि आप इसका 
प्रयोग करते हैं तो प्रलेखों को सामान्य ASC टेक्स्ट के रूप में सुरक्षित (सेव) करें। इस फॉर्मेट में, 
वर्ड प्रोसेसर द्वारा उत्पन्न सभी अतिरिक्त कोड हटा दिए जाते हैं। 






2. बेब ब्राउज़र, एचटीएमएल प्रलेखों को देखने और परीक्षण करने के लिए, सबसे अधिक 
सामान्य और लोकप्रिय वेब ब्राउजर मॉजिला फायरफॉक्स और इंटरनेट एक्सप्लोरर हैं। 


प्रथम एचटीएमएल प्रलेख तैयार करना 


अब हम चित्र 9.3 में देखे गए वेब पेज को निर्मित करेंगे। हम विंडोज नोट पैड का टेक्स्ट 
संपादक के रूप में प्रयोग करेंगे। बेसिक टेग में टाइप करें। उपर्युक्त नाम जैसे 'होम' में फाइल 








कम्प्यूटर और संचार प्रौद्योगिकी 


सुरक्षित करें। नोटपैड फाइल के .७८६ का डिफॉल्ट विस्तार देगा। लेकिन हम वेब पेज बनाना 
चाहते हैं इसीलिए फाइल का नाम home.htm रखें। 


SM home.htm - Notepad 


File Edit Format View Help 


<htm] > ~ 
<title>National Council of Educational Research and Training :: Home </title> 





File Edit View History Bookmarks Tools Help 


ल < [ x कि [] file:il/C:{Documents and Setti “7 हु 


Welcome to NCERT 


Done 


चित्र 9.4 - ब्राउज़र में हमारा वेब पेज 





हम अतिरिक्त एचटीएमएल कोड जोड़कर फाइल h०m€.॥ को संपादित कर सकते 
हैं, जब भी ब्राउजर में आप अपना कार्य देखना चाहते हो, अपने ब्राउजर को रिफ्रेश करें 
(मॉजिला फायरफॉक्स ब्राउजर में व्यू -> रिलोड़ में जाएं अथवा (९ + र दबाएं)। 
ब्राउजर पेज को पुनः लोड कर आपको नवीनतम संस्करण दिखाता है। 


हेडर खंड जोड़ना 


नोटपैड में ॥०m€.॥ फाइल खोलें। <४०]> टैग के पश्चात्‌ और <००४> टैग से पहले 
<head></head> टैग पेयर अंतःस्थापित करें। शीर्षक टैग के सिवाय जो कोड <॥९०> 
</९॥4> टैगों के मध्य जाता है, ब्राउजर द्वारा डिस्प्ले नहीं होता है। एचटीएमएल प्रलेख 
के इस भाग में स्क्रिप्टों, विशेष मीडिया प्लेयरों के विशेष फोंट होते हैं, विशेषकर तब जबकि 
वेब पेज किसी अन्य भाषा में बनाया जाता है, मेटा डाटा जिसका सर्च इंजन द्वारा इस वेब पेज 
का सूचीकरण करने के लिए प्रयोग किया जाता है, और विषय-वस्तु के लिए प्रयुक्त की जाने 
वाली कोई शैली इत्यादि होती है। हमारे उदाहरण में हमें ऐसी कोई विशेष आवश्यकता नहीं 
है। अतः हमारे वेब पेज के हेडर खंड में शीर्षक <।।६।९> के लिए टेक्स्ट </।४।७> है। इस 
टैग को अंतःस्थापित करें और पेज सुरक्षित करें। अपने ब्राउजर में वेब पेज देखें। 

हम <६।९></६४।०> टैग के बीच में जो लिखते हैं वह ब्राउजर विंडो के शीर्ष पर 
दिखाई देता है जो मैन्यू बार के ऊपर होता है। “राष्ट्रीय शैक्षिक अनुसंधान और प्रशिक्षण 
परिषद्‌ :: होम'' टेक्स्ट को देखें। जब आप वेब पेज प्रिंट करेंगे तब भी यह दिखाई देगा। 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 





9,5 वेब पेज की सामग्री - <BODY></B0DY> TAG के बीच भरना 
9,5.] वेब पेज का सौंदर्यीकरण - “बीजीकलर ='' विशेषता 


बॉडी टैग में कई विशेषताओं का उपयोग हो सकता है। हम उनमें से केवल एक को अर्थात्‌ 
'“बीजीकलर='' को लेंगे। इस विशेषता का उपयोग वेब पेज में बैकग्राउंड में रंग लाने के लिए 
किया जाता है। आइए कुछ उदाहरण देखें- 

<body bgcolor="cyan"> text </body> 

<body bgcolor="#00ff00"> text </body> 

<body bgcolor="red” background="bg.jpg”> text </body> 

पहले दो उदाहरणों से आप देखेंगे कि आप या तो रंग का नाम या फिर इसके 
हैक्साडेसीमल कोड का उपयोग कर सकते हैं। आप जिम्प या फोटोशॉप इत्यादि जेसे ग्राफ़िक 
एप्लीकेशन में हैक्स कोड देख सकते हैं या फिर इन्हें वेब पर देखें। 

तीसरे उदाहरण में आप देखेंगे कि हमने न केवल एक रंग को अपितु बैकग्राउंड के लिए एक 
छवि को भी परिभाषित किया है। रंगीन बैकग्राउंड के ऊपर छवि दिखाई देगी। इसलिए, यदि छवि 
काफी बड़ी है तो आप बैकग्राउंड में केवल छवि ही देखेंगे। यदि यह स्क्रीन से छोटी है तो चारों 
ओर बैकग्राउंड का रंग भी दिखाई देगा। आप छवि प्रबंधन के बारे में बाद के खंड में सीखेंगे। 

पूर्व के खंड में हमने एचटीएमएल टैग के <९३></९३4> युग्म की जांच की थी 
जिसमें हमारे वेब पेज का शीर्षक भी शामिल था। हमारा वेब पेज निम्न चित्र 9.6 के रूप में 
चित्रित किया जा सकता है जिसमें निम्न शामिल होंगे- 
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चित्र 9.6 - हमारे वेब पेज का एक योजनाबद्ध लेआउट 











कम्प्यूटर और संचार प्रौद्योगिकी 


9,5.2 टिप्पणी टैग - <!- ~> का उपयोग 


जब आप लंबी कोडिंग करते हैं या आप ऐसा कोड लिख रहे हैं जिसे आप चाहते हैं कि कोई 
और संपादित अथवा उपयोग करे, तो सेक्शनों को लेबल करना अच्छी आदत होगी। साथ ही, 
आप नहीं चाहते कि ये वेब पेज पर दिखाई दें। इस प्रयोजन हेतु एक उपयोगी टेग है 
टिप्पणी टैग <! - पाठ्य > उदाहरणार्थ- 
<! -- निम्न सेक्शन इमेज गैलरी प्रदर्शित करेगा -- > 

टिप्पणी टैगों के बीच में जो भी हो उसको अनदेखी की जाए और ब्राउजर में उसे प्रदर्शित 
न किया जाए। टिप्पणियां अधिक लाइनों की भी हो सकती हैं और सभी लाइनों को संलग्न 
करने के लिए केवल एक ही आरंभ और अंत टैग का उपयोग किया जा सकता है। 


9,5.3 बैनर तथा <hn></॥॥> टैग का उपयोग 


देखें कि बैनर में पाठ बड़े फोन्ट में हैं। इसे तैयार करने के कई तरीके हैं। आप फोन्ट साइज 
निर्धारित कर सकते हैं, पूर्व निर्धारित साइजों का उपयोग कर सकते हैं या पाठ्ययुक्त इमेज का 
भी उपयोग कर सकते हैं। जब एक विशेष प्रकार की शैली के पाठ्य अथवा पाठ्य प्रभाव 
का उपयोग किया जाना होता है जो कि सामान्य एचटीएमएल कोडिंग से प्राप्त नहीं किया 
जा सकता, तो अंतिम विकल्प को प्राथमिकता दी जाती है। 

जहां वास्तविक फोन्ट साइज़ निर्धारित करना संभव है (इस विकल्प पर हम बाद में चर्चा 
करेंगे) वहीं एचटीएमएल में शीर्षक के रूप में उपयोग हेतु पाठ के छह स्तर उपलब्ध हैं। उन्हें 
। से 6 तक क्रम में रखा गया है जिसमें | सबसे बड़ा है और 6 सबसे छोटा। लेकिन ॥! 
कितना बड़ा होगा और ४6 कितना छोटा? ये सापेक्ष आकार (साइज) हैं। अब यदि आपके 
पास ॥। से #6 के साइज में 6 वाक्य हैं जैसा चित्र 9.7 में है और यदि व्यू-> जूम-> जूम 
इनमें जाते हैं या ९६7। ++ दबाते हैं तो प्रत्येक वाक्य बड़ा हो जाता है। ऐसा करते रहें और 
पाठ्य का साइज़ बढ़ता जाएगा। उनका संबद्ध साइज बना रहेगा। व्यू-> जूम-> जूम आउट 
पर जाएं या ८7। -- दबाएंगे तो पाठ्य क्रमिक रूप से छोटा होता जाता है लेकिन उनका 
संबद्ध साइज बना रहता है। 

इस मामले में प्रयुक्त टैग हैं <॥।> पाठ्य </।>, <॥2> पाठ्य </02> इत्यादि से 
लेकर <॥6> पाठ्य </06> तक। निम्न उदाहरण देखें- 


प्राककथन 


एप्लीकेशन सॉफ्टवेयर 


हार्डवेयर 
चित्र 9.7 - <hn> </hn> टैग के उपयोग से शीर्षक निर्धारित करना 





9.5.4 <Font></Font> टैग का उपयोग 


यद्यपि <>< /॥7> टैग ब्राउजर के डिफॉल्ट फॉन्ट का उपयोग करेगा और विभिन्न आकार के पाठ्य 
को प्रदर्शित करेगा। अतः,यदि आप विभिन्न फोन्टों में पाठ्य प्रदर्शित करना चाहते हैं तो आप क्या करेंगे? 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


यदि आप ओपन ऑफ़िस ओआरजी राइटर या माइक्रोसॉफ्ट वर्ड जैसे वर्ड प्रोसेसर का उपयोग 
करते हैं तो आप भिन्न-भिन्न फोन्ट फेसों से पहले ही परिचित हैं। ये अक्षर लिखने की विभिन्न 
शैलियां हैं। एचटीएमएल में इसे प्राप्त करने के लिए हम <£07> पाठ्य </0०7॥0> टैग का 
उपयोग करते हैं। यदि आप किसी विशेषता का उपयोग नहीं करते हैं तो ब्राउजर डिफॉल्ट फोन्ट 
का चयन कर लेता है, लेकिन यदि आप फोन्ट फेस = अथवा केवल फोन्ट = का उपयोग करते 
हैं और इसे कोई मान, फोन्ट का नाम देते हैं तो पाठ्य इस फोन्ट के साथ प्रदर्शित होगा। लेकिन 
जिस कम्प्यूटर पर वेब पेज देखा जा रहा है उस पर वह फोन्ट इंस्टाल होना चाहिए। 

एचटीएमएल कोड निम्न प्रकार से पढ़ा जाए- 

<font face=Times New Roman> प्रदर्शित किया जाने वाला पाठ्य </font> 

आप अन्य विशेषताओं जैसे साइज = अथवा कलर = का उपयोग करने तथा अपनी पसंद 
के मान रखना चाहेंगे। साइज में आप +], +2 इत्यादि -], -2 इत्यादि का उपयोग कर सकते 
हैं या निरपेक्ष मान जैसे 247% का उपयोग कर सकते हैं जिसमें [5% से तात्पर्य पिक्सेल से है 
या फिर प्रतिशत का उपयोग भी कर सकते हैं जैसे साइज = 30%। कलर में सबसे पहले ध्यान 
रखें कि अमेरिकन स्पेलिंग '८०।०7' का उपयोग करें और फिर रंग का नाम अथवा 
हैक्साडेसीमल (अथवा हैक्स कोड) का उपयोग करें। 

आप देखेंगे कि पाठ्य का प्रत्येक पैराग्राफ़ अलग-अलग फोन्ट फेस, फोन्ट साइज़ और 
रंग में है। पेज हेतु एचटीएमएल कोड चित्र 9.8 में देखा जा सकता है। 


Introduction 


By now you have come out of the conventional ideas of a computer whether in regard to its with respect to its physical 
appearance or itsand functionalities and seen the multifarious felds of activities in which the principle is operative irrespective of 
the physical appearances of the device. With electronic devices becoming ubiquitous, it is important to know and understand 

the latest trends and anticipate what is coming ॥ the near future. It is a process of continuous evolution, constantly updating and 
improving in efficiency and functionality. 


more... 


APPLICATION SOFTWARE 


Software development has become a more systematic process where a great emphasis is laid on finding out the user 
equirement, preparing a process model, demonstrating an early version to its customers (prototyping) and on trying to ensure 
that the software is free of errors. Moreover, an incremental software development process is followed where a project 
proceeds in small and manageable steps. 


There are enormous number of application software catering to our needs. The capabilities are increasing day by day as per 
‘needs. Grossly we can place these in following categories according to their uses : 


® Educational and communication software 

® Design, media and simulation software 

® Office automation and process mangement software 
® Control and analysis software 





चित्र 9.8 - <{0nा> </[०nt> टैग का उपयोग 








कम्प्यूटर और संचार प्रौद्योगिकी 


9.5.5 पाठय रेखांकित करने हेतु टेग्स 


यद्यपि विभिन्न भाषाओं में कई फोन्ट फेस हैं जो लेखन कला की अलग-अलग शैलियों में 
हैं तथापि उनमें से कई पाठ्य का अधिकांश भाग पढ़ने के लिए उपयुक्त नहीं हैं। साथ ही 
एक ही पेज पर कई सारे फोन्ट फेसों का उपयोग पाठक के लिए कठिनाई भरा हो सकता 
है, अत: व्यक्ति रेखांकन के लिए अन्य तरीकों को प्राथमिकता देगा। 

हम ऐसी तकनीक के बारे में पहले जान चुके हैं जब हमने <॥९३०> टैग का उपयोग 
किया था। आप रेखांकित करने के लिए अलग-अलग साइज के पाठ का उपयोग कर सकते 
हैं। यह टाइटल और हेडिंग्स के लिए उपयुक्त हो सकता है लेकिन पाठ्य के भीतर शब्दों 
अथवा वाक्यांशों को रेखांकित करने के लिए क्या करते हैं। अक्सर हम बोल्ड, इटैलिक्स या 
अंडरलाइन का उपयोग करते हैं। आइए उन टैग्स को देखते हें जो ऐसा कर सकते हैं- 











परिणाम यहां दर्शाएं 
<> बोल्ड </b>; बोल्ड 


हम इटैलीसाइज कैसे करते हैं परिणाम यहां दर्शाएं 
<i> italicize </i> text; तथा इटैलीसाइज 
हम अंडरलाइन कैसे करते हैं परिणाम यहां दर्शाएं 
<u> underline </u> text. अंडरलाइन 


आप <50078> ९% </ऽ7०॥६> के प्रयोग द्वारा भी बोल्ड फेस टेक्स्ट प्राप्त कर 
सकते हैं। समापन टैग का प्रयोग करना याद रखें। यदि आप एसा नहीं करते तो अनुवर्ती टेक्स्ट 
रेखांकित हो जाएगा। अपने वेब पेज पर ऐसा करके देखें। 


9.5.6 पैराग्राफ बनाना और टेक्स्ट ( पाठ्य) के भागों को पृथक करना 


सतत्‌ पाठ्य अक्सर पैराओं में विभाजित होता है तथा वर्ड प्रोसेसरों की खोज से पाठ को 
विभिन्न तरीकों से जस्टीफाइड (सरेखित) किया जा सकता है। कोई लाइन आधी अधूरी न 
छूटे, (पृष्ठ के नीचे अथवा शीर्ष पर पाठ्य की एक लाइन) इसके लिए हमें लाइन-ब्रेक देना 
होगा। आइए इस प्रयोजन हेतु प्रयुक्त टैगों को देखें- 










<P> टेक्स्ट </P> टैग 


वेब पेज ०९.॥४7 में पाठ्य को दोबारा देखें । पहले पैरा का शीर्षक है प्रस्तावना। पेराग्राफ़ 
की संरचना देखें (चित्र 9.9 देखें)। शीर्षक के बाद ब्लैंक लाइन है और उसके बाद टेक्स्ट ब्लॉक 
है। अगला पैरा तत्काल शुरू नहीं होता है। आपके पास बीच में एक या अधिक ब्लैंक लाइन हैं। 

आइए उन टैग्स को देखते हैं जिनके द्वारा हम यह प्राप्त कर सकते हैं। टैग युग्म <> 
</> का प्रयोग पैराग्राफ़ के लिए है। आरंभ का टैग <> टैग से पहले की ब्लैंक लाइन 
के लिए है। अतः इन टैग्स के बीच स्थित पेराग्राफ़ इसे पूर्व के पेराग्राफ़ से अलग करता है। 
लेकिन अंत टैग </> टैग के बाद की लाइन को नहीं दर्शाएगा। इसलिए टेक्स्ट का अगला 
भाग <> से आरंभ करना होगा। 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


यह टैग स्वतः प्रयोग पर ब्लैंक लाइनें दर्शाता है। जब आप टेक्स्ट के ब्लॉकों को अलग 
करना चाहते हैं तो इसका प्रयोग कर सकते हैं। निम्न उदाहरण देखें। 


| Software development re development has become a more systematic process where a great emphasis is laid on finding out the user 
Jequirement, preparing a process model, demonstrating an early version to its customers (prototyping) and on trying to ensure 
that the software is free of errors. Moreover, an incremental software development process is followed where a project 
proceeds in small and manageable steps. | 


There are enormous number of application software catering to our needs. The capabilities are increasing day by day as per 
needs. Grossly we can place these in following categories according to their uses : 


चित्र 9.9 - टेक्स्ट के इस टुकड़े के बीच एक खाली लाइन होगी 





<bए7> टैग 


आप देखेंगे कि <> </p> टैग युग्म से पैराग्राफों के मध्य अंतर रखा जा सकता है। जब 
आप ब्लैंक लाइनों के लिए टैग का प्रयोग करते हैं तो इससे पेज खराब दिख सकता है। आप 
अंतर कम रखना चाहेंगे। साथ ही आप एक लाइन खत्म कर अगली लाइन शुरू करना चाहेंगे। 
जब आप टेक्स्ट टाइप करते हैं, अपनी विन्डो के साइज़ के आधार पर आप टेक्स्ट को अगली 
लाइन में अंतरित होते देखेंगे। लेकिन यदि आप विन्डो को रिसाइज करते हैं तो टेक्स्ट पुनः 
व्यवस्थित होता है। इसका अर्थ है कि यदि विंडो बड़ी हो तो टेक्स्ट समान लाइन पर आ 
जाएगा। बिना लाइन ब्रेक दर्शाए टेक्स्ट अगली लाइन में अंतरित नहीं किया जा सकेगा। 
इस संदर्भ हेतु <७7> टैग का प्रयोग किया जाता है जो कि लाइन ब्रेक के लिए है। यह टैग 
अनुवर्ती टेक्स्ट को अगली लाइन में ले जाएगा। यह एकमात्र टैग है जिसमें समापन टैग नहीं है। 


नोट - लाइन ब्रेक टैग <> का प्रयोग यथावांछित ब्लैंक लाइनों के लिए किया जा सकता है लेकिन 
<> टैग का प्रयोग एक से अधिक बार नहीं किया जा सकता। अन्य शब्दों में, <> <> <p> 


विनिर्देशन से 3 खाली (एम्प्टी) लाइन प्राप्त नहीं होंगी, इससे मात्र एक लाइन प्राप्त होगी। लेकिन 
<br> <br> <br> से तीन लाइन प्राप्त होंगी। 





<h7> टैग 

यदि आप अपने वेब पेज पर लाइन द्वारा दो खंडों को अलग करना चाहते हैं तो आप दो तरह 
से ऐसा कर सकते हैं। पहला, आप इमेज का प्रयोग करते हैं। दूसरा, आप <॥7> टैग का 
प्रयोग करते हैं। यह भी एकमात्र टैग है और हॉरीजन्टल रूल के लिए है। आप इस टैग के 
साथ विभिन्न विशेषताओं का प्रयोग कर सकते हैं जैसा कि निम्न उदाहरणों में दिया गया है। 


<hr width= 60>, <hr width= 70% >, <hr size=5> 


चौड़ाई लाइन की लंबाई और साइज मोटाई दर्शाता है। 


9,5.7 टेक्स्ट का संरेखण ( अलाइनिंग ) 

अधिकांशतः पेज के बाएं हाशिए से टेक्स्ट (पाठ्य) का सरेखण किया जाता है। विशेष मामलों 
में आप दाएं ओर से भी सरेखण करते हैं। यदि यह शीर्षक है तो आप इसे पेज के केन्द्र में रखना 
चाहेंगे। आइए अपने वेब पेज पर पेराग्राफ़ों को देखें। पहला पैरा बाई ओर से सरेखित है। देखिए, 








कम्प्यूटर और संचार प्रौद्योगिकी 


इसमें प्रत्येक लाइन बाई ओर से समान ऊर्ध्व स्थिति से आरंभ होती है और दाई ओर अलग-अलग 
स्थानों पर समाप्त होती है। विभिन्न प्रकार के टैगों के साथ “8४7 = “८९” विशेषता का प्रयोग 
किया जा सकता है। उदाहरणार्थ शीर्षक टैग या पैराग्राफ या सारणियों में भी। 

उदाहरण के लिए < 2] = “]९f”>, यह टेक्स्ट बाई ओर सरेखित है। </> 

इसी प्रकार से आप align = ‘right’, align = “center” और align = “justify” का 
प्रयोग दाई ओर, केन्द्र में और पाठ को बाई और दाई ओर बराबर सरेखित करने के लिए कर 
सकते हैं। इस विशेषता का प्रयोग अन्य विशेषताओं जैसे- फोन्‍न्ट, रंग अथवा साइज के साथ 
भी किया जा सकता है। 


9.5.8 विषय सूची प्रस्तुत करना 


सामान्यतया दो प्रकार की सूचियों का प्रयोग किया जाता है- बुलेटिड लिस्ट अथवा 
अव्यवस्थित सूची और क्रमवार सूची अथवा व्यवस्थित सूची। 


अव्यस्थित सूची का उदाहरण देखें- 


<ul> 
<]¡> साइकिल 
<> बैलगाडी 


<]> कार 
<]> बस 
<]> ट्रेन 
<]>जहाज 
</ul> 





टैग युग्म <०।> और </॥।> अव्यवस्थित सूची के लिए हैं जबकि <]।> सूची मद के 
लिए है। आप टैग को बंद करने के लिए </।> का प्रयोग कर सकते हैं लेकिन यह 
वैकल्पिक है। प्रत्येक मद के पहले बुलेट देखें। यह <।/> टैग से बनाया जाता है। एक सूची 
में कितनी मदें हो सकती हैं, इसकी सीमा नहीं है। 

व्यवस्थित सूची काफी हद तक अव्यवस्थित सूची जैसी होती है सिवाय इसके कि आरंभ 
टैग <॥।> की बजाय <०> है और समापन टैग </०।> की बजाय </०१> है। सूची की 
मदों में अभी भी समान टैगों का प्रयोग होता है। 


व्यबस्थित सूची का उदाहरण निम्न हैं- 


. अर्जेटीना <ol> 
. भूटान <]।>अर्जटीना 
. कनाडा < ]]>भूटान 


. डेनमार्क <]>कनाडा 

. इथियोपिया < ]>डेनमार्क 

. फ्रांस <]>इथियोपिया 
< ]>फ्रांस 


</ol> 





एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


व्यवस्थित सूची की तीन निम्नवत्‌ विशेषताएं हैं - 

<0> टैग की टाइप विशेषता का प्रयोग सूची मदों (]/0/० / /) के समक्ष दी गई 
संख्या के प्रकार को बदलने के लिए किया जा सकता है। उदाहरण के लिए- 

<OL TYPE = ]> से संख्या (।, 2, 3) हो जाती है (यह डिफॉल्ट है) 

<OL TYPE = A> से बड़े अक्षर (4, 5, ट) हो जाते हैं। 

<OL TYPE = ४० से छोटे अक्षर (७, ७, ८) हो जाते हैं। 

<OL TYPE = ]> से बड़े रोमन अंक(], |, गा) हो जाते हैं। 

<OL TYPE = ¡> से “स्टार्ट? : छोटे रोमन अंक (।, #, 7) हो जाते हैं। 

<0L> टैग की विशेषता का प्रयोग अंकित सूची को '।' (अथवा 4, 9, ] अथवा ) 
के अलावा किसी अन्य मान से आरभ करने के लिए किया जाता है। 

<OL TYPE | स्टार्ट =5> से क्रम संख्या 5 से आरंभ होगी। 

<OL TYPE =4 स्टार्ट =5> से क्रम संख्या ह से आरंभ होगी। 

<> टैग की “बेल्यू” विशेषता का प्रयोग सूची के भीतर विशेष अंकों को बदलने के 
लिए किया जाता है। 

<LI TYPE = । वैल्यू = 5> अंक 5 को प्रदर्शित करेगा। 


9,5.9 सारणियाँ - <६b।९> </६३७।९> टैग का प्रयोग 


वेब पेज विषय-वस्तु को व्यवस्थित करने के लिए टेबल्स्‌ एक शक्तिशाली तकनीक है। टेबल्स्‌ 
का प्रयोग दो महत्त्वपूर्ण तरीकों से किया जा सकता है। पहला जिसमें टेबल वेब पेज पर दिखाई 
देती है और जिसमें यह दिखाई नहीं देती। परंतु विषय-वस्तु को वेब पेज के क्षेत्र विशेष तक 
सीमित कर देती है। हम इन दोनों तरीकों के उदाहरणों को देखेंगे। 

आइए एक सामान्य टेबल को देखते हैं। निम्न चित्र 9.।0 को देखें। 
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चित्र 9.70 - एक प्रारूपिक तालिका की सरचना 
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टेबल में पंक्तियां (रो) और कॉलम हैं। कुछ पंक्तियों और कॉलमों को मिलाकर टेबल के 
भीतर स्थान को बड़ा किया जा सकता है। इन्हें बहुत सारी पंक्तियों और कॉलमों में भी 
विभाजित किया जा सकता है। टेबल में हेडर रो हो सकती है जो दर्शाती है कि प्रत्येक कॉलम 
में क्या है। इसमें एकांतर में पहले कॉलम में केप्शन होते हैं जो दर्शाते हैं कि प्रत्येक पंक्ति 
में क्या है। इन पंक्तियों, कॉलमों, प्रत्येक सेल अथवा केप्शन को भिन्न-भिन्न तरीकों से 
रेखांकित किया जा सकता है और ऐसा भिन्न-भिन्न फोन्ट फेसों द्वारा अक्षरों के आकार, टेक्स्ट 
पर बल देकर, इसे भिन्न प्रकार से सरेखित करके अथवा बैकग्राउंड में रंग भरकर अथवा इमेज 
बनाकर किया जा सकता है। अत: इस तरह से टेबल कई प्रकार की हो सकती हैं। 

टेबल की पंक्तियों और कॉलमों को लाइनों द्वारा चिह्नित किया जाता है। एचटीएमएल में हम 
इन्हें बॉर्डर कहते हैं। इनके रंगों तथा लाइन की मोटाई को संशोधित किया जा सकता है। सेलों में 
जो टेक्स्ट होता है उसे बॉर्डर से अलग-अलग किया जाता है। सेलों को भी एक-दूसरे से अलग 
किया जा सकता है। इस प्रकार जब हम टैग युग्म <३।९> </६३७।९> का प्रयोग करना सीखते 
हैं हम विषय-वस्तु को व्यवस्थित करने का एक बिल्कुल नया तरीका सीख रहे होते हैं। 

प्रस्तुतीकरण के इन भिन्न-भिन्न तरीकों को बहुत कम टैगों, टैग विशेषताओं और वैल्यूज 
के प्रयोग से प्राप्त किया जा सकता है। 

<t2७।९> </३।९> युग्म महत्त्वपूर्ण युग्म है। सभी टैग्स, विशेषताएं अथवा वैल्यूज , 
टेक्स्ट अथवा इमेज टेबल की विषय-वस्तु तैयार करते हैं। एक साधारण तीन पंक्ति, दो कॉलम 
वाली टेबल देखें। पहली पंक्ति में प्रत्येक कॉलम के लिए कैप्शन दिए गए हैं। एचटीएमएल 
कोड कैसा दिखाई देता है? (चित्र 9.]])। 


<table border="l"> 
<caption align="center" >This is our ‘table's caption</caption> 
<tr><td>first cell in the first row</td> 

<td>second cell in the first row</td></tr> 











<tr><td>first cell in the seco! rew</td> 
<td>second cell in theNstcohd row</td></tr> 





<tr><td>first cell in ffm® third row</td> 
<td>second cell inthe third row</td></tr> 


</table> 
ता सं 2 -लछ 
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चित्र 9.7- एक टेबल के साथ 3 पंक्तिया और 2 कॉलम 










एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 
मूलतः टेबल बनाने के लिए निम्नवत्‌ पाँच टैगों का प्रयोग होता है। 


<tr> </tr> यह युग्म (<ध7> का अर्थ टेबल रो है) टेबल की पंक्ति बनाने के लिए है। इसलिए 
टेबल की प्रत्येक पंक्ति हेतु एक युग्म की आवश्यकता होती है। 


<td> </td> यह युग्म (<> से अभिप्राय टेबल डाटा से है) सेल के लिए है तथा जितने युग्मों 
का आप प्रयोग करते हैं बह आपकी पंक्ति कितने सेलों में विभक्त होगी, यह संख्या 
निर्धारित करेगी। 


<th> </th> <> </> टैग के स्थान पर प्रयुक्त किया जाने वाला यह युग्म (<> से 
अभिप्राय टेबल रो हेडिंग से है) सेल में टेक्स्ट को बोल्ड फेस के रूप में तथा पंक्ति 
के शीर्षक के रूप में व्यक्त करने के लिए केन्द्र में फॉर्मेट करता है। 


<caption> </cati0n> | इस टैग युग्म का प्रयोग टेबल को शीर्षक देने के लिए किया जाता है। 


इन मूल टेबल टैगों को विभिन्न प्रकार की टेबल (सारणी) बनाने के लिए विस्तारित किया 
जा सकता है। टेक्स्ट को रेखांकित तथा फॉर्मेट करने वाले अन्य एचटीएमएल टैगों का प्रयोग 
उनकी विशेषताओं और वैल्यूज के साथ किया जा सकता है। आइए कुछ विशेषताओं, उनकी 
संभावित वैल्यू तथा टेबल पर इसके प्रभाव को देखें। 


<६३७।९> टैग की विशेषताएं 
टेबल का बॉर्डर तथा बॉर्डर का रग विनिर्दिष्ट करना 


<2७।९> टैग की “बॉर्डर' विशेषता का प्रयोग टेबल का बॉर्डर बनाने के लिए किया जाता 
है। 'बॉर्डर' विशेषता टेबल के बॉर्डर की अंक के रूप में मोटाई विनिर्दिष्ट करती है। डिफॉल्ट 
सेटिंग है बॉर्डर = 0 जिसका अर्थ है कि यदि आप बॉर्डर विशेषता का प्रयोग नहीं करते हैं 
तो आपकी टेबल में कोई बॉर्डर नहीं होगा। 


उदाहरण- <“ab।९ ॥०7५९7=2> इस टेबल के बॉर्डर की मोटाई है 2 </table> 

टेबल को रंग करने के दो तरीके हैं। आप रंगीन बॉर्डर बना सकते हैं या सेलों को रंग से भर 
सकते हैं। टेबल बॉर्डर का रंग विनिर्दिष्ट करने के लिए बॉर्डरकलर = विशेषता का प्रयोग करें। 
रंग भरने के लिए रंग विनिर्दिष्ट करने के लिए बीजीकलर = विशेषता का प्रयोग करते हैं। 


उदाहरण- <table bordercolor="red"> इस टेबल का बॉर्डर लाल होगा </table> 
<table bgcolor="green"> टेबल के सेलों का बैकग्राउंड हरा होगा </table> 
जैसा कि हमने पहले देखा, इन विशेषताओं का मान (वैल्यू) रंग का हैक्सकोड भी हो सकता 
है। अतः आप नीले के स्थान पर # 00007 का प्रयोग भी कर सकते हैं। यह तब बहुत उपयोगी 
है जब आप एक रंग विशेष का प्रयोग करना चाहते हैं और उसका कोई नाम नहीं है। 





कम्प्यूटर और संचार प्रौद्योगिकी 


रंग को बजाय आप टेबल के बैकग्राउंड में इमेज का प्रयोग भी कर सकते हें। 
'बैकग्राउंड' विशेषता टेबल अथवा प्रत्येक सेल में बैकग्राउंड में जो इमेज डालनी है वह 
विनिर्दिष्ट करती है। इन विशेषताओं को विनिर्दिष्ट करते हुए निम्न बातें याद रखें- 
° <2।९> टैग में यह संपूर्ण टेबल (सेल तथा मार्जिन दोनों) को प्रभावित करता है। 
° <7> टैग में यह संपूर्ण पंक्ति (केवल सेलों को) को प्रभावित करता है। यह <३९> 
टैग में विनिर्दिष्ट रंग को दबा देता है। 
° 'बैकग्राउंड' विशेषता यदि <7> टैग में विनिर्दिष्ट की जाए, तो कार्य नहीं करती। 
° <> टैग में यह विनिर्दिष्ट सेल को प्रभावित करता है। यह <।॥।।०> अथवा <tr> 
टैग में विनिर्दिष्ट रंग इमेज को दबा देता है। 


टेबल और इसके सेलों के आकार को समायोजित करना 


यदि कोई आकार विनिर्दिष्ट नहीं किया गया हो तो टेबल विषय-वस्तु के अनुरूप ही बड़ी होगी। 
टेबल की चौड़ाई और ऊंचाई को नियंत्रित करने के लिए क्रमशः "॥।०४' (चौड़ाई) और 
‘Heiएh“' (ऊंचाई) विशेषताओं का प्रयोग किया जा सकता है। ये विशेषताएं या तो प्रतिशत 
(ब्राउजर विंडो के) अथवा पिक्सल में मापे जाने वाले विशिष्ट आकार में विनिर्दिष्ट होती हैं। 

इन विशेषताओं के संबंध में कुछ विशिष्ट गुण होते हैं जो आपको इनका <> और 
<4> टैगों में उपयोग करते हुए ध्यान में रखने चाहिए। 

१ किसी विशेष <70> अथवा <२> टैग में 'हाइट' विशेषता का प्रयोग <४३।९> टैग 
के “हाइट' विनिर्देशन को दबा देता है। 

° किसी विशेष <> अथवा <I> टैग में हाइट/विड्थ विशेषता का प्रयोग उस कॉलम 
के सभी <> टैगों में ऊँचाई/चौड़ाई को बदल देता है। यदि एक कॉलम के दो सेलों 
में हाइट/विड्थ विशेषताएं हैं तो सामान्यतया ब्राउजर विनिर्देशित अधिक चौड़ाई का 
प्रयोग करता है। 


मार्जिन को कस्टमाइज़ करना ( अनुकूल बनाना ) 


'सेलपैडिंग' विशेषता यह बताती है (पिक्सल में) कि सेल की मदों और सेल की दीवारों के बीच 
कितना खाली स्थान है, इस विशेषता की अधिक वैल्यू सेल को इसकी 'पैडिंग' द्वारा बनाती है। 

'सेलस्पेसिंग' विशेषता दो संगत सेलों के बीच की दूरी बताती है (पिक्सल में)। यह 
विशेष तौर पर तब लाभदायक है जब आप टेबल टैग का प्रयोग टेक्स्ट के ब्लॉकों को पृथक 
करने के लिए करते हैं। उदाहरण के लिए आप दो कॉलम टेक्स्ट को सृजित करने के लिए 
इस विशेषता का प्रयोग कर सकते हैं। 

आप देखेंगे कि यदि आप सेल पैडिंग विनिर्दिष्ट नहीं करते तो टेबल का बॉर्डर टेबल की 
विषय-वस्तु के किनारे बन जाएगा। इसके कुछ उदाहरण चित्र-9.।2 में दिए गए हैं। 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 
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<table cellpadding=2> <table cellspacing=2> 
चित्र 9.72 - सेल पैडिंग का उपयोग और सेलस्पेसिंग विशेषता 


सेल संरेखण को कस्टमाइज करना ( अनुकूल बनाना ) 


सेल सरेखण से अभिप्राय है कि सेल में टेक्स्ट का क्षेतिज या ऊर्ध्व सरेखण करना। डिफॉल्ट 
में सेल कटेंट बाई ओर सरेखित होते हैं (क्षेतिज रूप में) और केन्द्र में (ऊर्ध्व रूप में) होते 
हैं। इसे बदलने के लिए हम <d> टैग में '३]६४०' = विशेषता का प्रयोग करते हैं। 

निम्न उदाहरण देखें- 

क्षैतिज सरेखण के लिए, 

<TD ALIGN = I९ft> पाठ्य को बाई ओर सरेखित करता है। 

<TD ALIGN = 7¢॥> पाठ्य को दाई ओर सरेखित करता है। 

<TD ALIGN = center> पाठूय को मध्य में रखता है। 









































ऊर्ध्व सरेखण के लिए- 

<TD VALIGN = 07> पाठ्य को शीर्ष पर ले जाता है। 

<TD VALIGN = bott0m> पाठ्य को सबसे नीचे ले जाता है। 
<TD VALIGN = middle> पाठ्य को बीच में रखता है। 


आप क्षैतिज सरेखण = विशेषता को ऊर्ध्व सरेखण = विशेषता से भी जोड़ सकते हैं। 
पंक्तियों तथा कॉलमों का विलय 
दो या अधिक संगत सेलों अथवा दो या अधिक पंक्तियों का विलय ROWSPAN/COLSPAN 


विशेषता के प्रयोग द्वारा किया जा सकता है। इससे हमें सेल को संपूर्ण पंक्ति अथवा कई 
पंक्तियों या कॉलमों तक बढ़ाने में सहायता मिलती है। निम्न उदाहरण (चित्र 9.।3) देखें- 
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चित्र 9.73 - रोस्पैन और कोलस्पैन विशेषता का उपयोग 












कम्प्यूटर और संचार प्रौद्योगिकी 
टेबलों की नेस्टिंग करना 


वेब पेज पर दो टेबलों को एक साथ रखने का प्रयास करें। आप देखेंगे कि <३॥।९> की टैग स्वत: 
ही दूसरी टेबल को अगली लाइन में भेज देता है। इस समस्या के समाधान के लिए हम सामान्य 
तौर पर दो टेबलों को तीसरी टेबल में रख देते हैं (पेस्ट कर देते हैं) जो कि दो टेबलों के बॉर्डर की 
तरह होता है और इस प्रकार उन्हें एक-दूसरे की संगत लाइन पर रखा जा सकता है। 

आप एक पंक्ति और दो कॉलमों द्वारा एक टेबल बनाते हैं और दोनों सेलों में प्रत्येक में 
एक टेबल को रख देते हैं। इसका कोड और परिणाम निम्न चित्र 9.।4 में देखें। 
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चित्र 9.74 ~ टेबल का कोड टेबल के साथ 


नेस्टिंग का प्रयोग ऐसी टेबल बनाने के लिए भी किया जा सकता है जहां टेबल की प्रत्येक 
पंक्ति में अलग-अलग सेलपैडिंग और सेलस्पेसिंग हो। इसे करके देखें। 

आइए देखें कि वेब पेज में टेबलों का कया उपयोग है? चित्र 9.5 देखें । यहां पर टेबलों 
का प्रयोग दो प्रकार से किया गया है। पूरा वेब पेज ही टेबल जैसा दिखाई देता है। इस टेबल 
में दो पंक्तियां हैं। पहली पंक्ति में केबल एक सेल या कॉलम है और दूसरी, जिसमें मेन्यू 
विकल्प है, में पांच सेल हैं। तीसरा जिसमें वेब पेज का टेक्स्ट है, में दो सेल या कॉलम हैं। 
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चित्र 975 - एक वेब पेज पर विषय-सूची के आयोजन के लिए टेबल का उपयोग 





आप पेज पर तीन टेबल भी देख सकते हैं- 
* विषय सूची वाली पहली टेबल में 6 पंक्तियां या प्रत्येक में एक सेल है। इस टेबल को 
मुख्य टेबल की तीसरी पंक्ति के पहले कॉलम में रखा गया है (पेस्ट किया गया है)। 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


° दूसरी टेबल जिसमें हार्डवेयर के विनिर्देशन और मूल्य हैं, को दूसरे कॉलम में रखा गया है। 
हेडर रो सूचना के प्रकार दर्शाता है और पहला कॉलम हार्डवेयर का प्रकार बताता है। 

* मुख्य टेबल की तीसरी पंक्ति के तीसरे कॉलम में तीसरी टेबल में इमेज गैलरी की 
झलकियां (थम्बनेल्स) हें। प्रत्येक इमेज का इसके बड़े संस्करण के साथ हाइपरलिंक 
है और यह दूसरे वेब पेज पर खुलेगा। हम इस टेबल के लिए टेगों के बारे में 
खंड 9.5.0 में चर्चा करेंगे। 

यदि आप इस पेज के स्रोत कोड को देखें (निरीक्षण करें), आप इन सारणियों हेतु टैग 
पहचानने में सक्षम होने चाहिए। इन सारणियों हेतु टैग लिखें। यह सुनिश्चित करें कि प्रत्येक 
टैग का संगत समापन टैग हो। सारणियों, पंक्ति या सेल की नेस्टिंग करते हुए यह विशेष रूप 
से आवश्यक है। भिन्न-भिन्न विशेषताओं और उनके मान के प्रयोग को भी नोट करें। उनमें 
भिन्नता लाएं और प्रभाव का निरीक्षण करें। 


9,5.0 वेब पेज पर फोटोग्राफ एवं अन्य मीडिया 
आप कई वेबसाइट देखते हैं जिनमें एक या अधिक इमेज होती हैं। इसमें संगठन के लोगो 
(।०६०) , कुछ डिजाइन तत्त्वों, बैकग्राउंड, इमेज गैलरी या वेब पेज को सुंदर बनाने के लिए 
फोटोग्राफ का प्रयोग भी किया जा सकता है। 

इमेज चित्रकारी, फोटोग्राफ, ग्राफ या इमेज के रूप में सुरक्षित सजावटी टेक्स्ट भी हो 
सकता है। स्मॉल फाइल साइज की आवश्यकता को देखते हुए HTM, ए. शा एवं png 
फॉर्मेट को समर्थन करता है। लेकिन जैसा कि हम पहले पढ़ चुके हैं कि HM. टेक्स्ट फाइल 
बनाता है। इसीलिए इमेज फाइल के अंदर नहीं रखी जाती है। फाइल का संदर्भ लिया जाता 
है और इमेज फाइल टेक्स्ट फाइल के साथ-साथ आ जाती है। 

हम वेब पेज पर <> टैग का प्रयोग कर इमेज इंसर्ट करते हैं। यह हमेशा एसआरसी 
विशेषता के साथ प्रयोग होता है; जो कि फाइल का स्रोत है (इमेज फाइल क्या है और कहां 
पर है?) विशिष्ट उदाहरण है - 
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पहले उदाहरण में, जो इमेज है वह ७] फाइल वाले फोल्डर में ही रखी जाती है। दूसरे 
उदाहरण में, इमेज उप-फोल्डर में है जिसे इमेजेस कहते हैं जो कि ॥07 फाइल वाले फोल्डर 
में ही है। यह एक रूचि पूर्ण विकल्प है। इमेज फाइल कहीं भी हो सकती है जब तक कि 
हम इसको सही स्थिति परिभाषित कर सकते हैं। इमेज विभिन्न वेबसाइट पर भी हो सकती 
है जो विश्व में कहीं भी स्थित सर्वर पर होती है। 
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निश्चित ही इसका अर्थ है कि वेबसाइट और इमेज दूरस्थ वेबसाइट पर उपलब्ध है, जब 
आप अपना वेब पेज देख रहे हैं। 








कम्प्यूटर और संचार प्रौद्योगिकी 


<IMG> टैग की विशेषताएं 


<IMG> टैग की कई विशेषताएं हो सकती हैं जो फॉर्मेटिंग, रेखांकित करने और इमेज के 
आकार को निर्दिष्ट करने में सहायक होती हें। 


इमेज के आयामों को विनिर्दिष्ट करना 


याद रखें कि इमेज की बडे आकार की फाइल हो सकती है। इमेज के आयामों (लंबाई 
एवं चौड़ाई) को निर्दिष्ट करना इमेज के लोड करने के समय को नियंत्रित कर सकता है। 
जब ब्राउज़र पेज को लोड करता है, यह लंबाई और चौड़ाई वाली विशेषताओं को नोट 
करता है और इमेज के लिए उतना स्थान छोड़ता है। फिर यह शेष का टेक्स्ट लेआउट तैयार 
करता है और तब यह वापिस जाता है और इमेज को भरता है। यदि इन विशेषताओं को 
निर्दिष्ट नहीं किया जाता है तो ब्राउजर की लंबाई और चौड़ाई प्राप्त करने के लिए पर्याप्त 
इमेज को लोड किया जाता है इससे पहले कि यह शेष टेक्स्ट के लेआउट को तैयार कर 
सके, जिसके कारण पेज की अन्य सामग्री को धीरे-धीरे डिस्प्ले करता है। इमेज की लंबाई 
और चौडाई निर्दिष्ट करने के लिए, <I> टैग में लंबाई और चौड़ाई (पिक्सल में) 
विशेषताएं जोड़े। 

यदि लंबाई या चौड़ाई मान इमेज से छोटे या बड़े हों तो क्या होता है? सीधी बात है इमेज 
कट जाती है या बड़ी हो जाती है (चित्र 9.।6) इसलिए लंबाई और चौड़ाई वास्तविक इमेज 
के समान होनी चाहिए। 


निर्दिष्ट चौड़ाई इमेज की चौडाई निर्दिष्ट चौडाई इमेज की चौड़ाई | निर्दिष्ट चौड़ाई इमेज की चौडाई 
से कम है। से अधिक है। के समान है। 


चित्र 9.6 - इमेज आयामों के विनिर्देशनों का प्रभाव 





इमेज का सरेखण 


डिफॉल्ट द्वारा इमेज वेब पेज के बाई ओर सरेखित होती है और टेक्स्ट इमेज की सबसे नीचे 
को लाइन पर सरेखित होती है। इस डिफॉल्ट सेटिंग को बदलने के लिए, HTM कई इमेज 
सरेखण विकल्पों को प्रदान करता है- 
१ टेक्स्ट की लाइन के अनुसार इमेज को तीन विकल्प ऊर्ध्व सरेखित करते हैं - align 
= top , align =bottom तथा align = middle. 
* दो विकल्प इमेज को विंडो के बाई अथवा दाई ओर सरेखित करते हैं 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 
नीचे चित्र 9.7 में देखें। 


ALIGN = TOP आसपास के टेक्स्ट के शीर्ष के 
अनुसार इमेज के शीर्ष को सरेखित करता है जैसा कि 
सामने चित्र में प्रदर्शित किया गया है। 


ALIGN=MIDDLE आसपास के टेक्स्ट की 
बेसलाइन पर इमेज को मध्य में रखता है। 


इसी प्रकार से, ALIGN = BOTTOM इमेज के 
नीचे के भाग को टेक्स्ट की रेखा पर रखता है। यह 
डिफॉल्ट सेटिंग है। 


ALIGN=LEFT से इमेज को ब्राउजर विंडो के 
बाई ओर रखा जाता है। 
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ALIGN=RIGHT से इमेज को ब्राउजर विंडो 
के दाई ओर रखा जाता है। 











चित्र 9.77 - सरैखण के प्रयोग = इमेज टैग की विशेषताएं 





इमेज के बॉर्डर 

<IMG> टैग की बॉर्डर विशेषता बॉर्डर डिस्प्ले करती है। आप निर्दिष्ट मान द्वारा इसकी मोटाई 
को नियंत्रित कर सकते हैं। यदि आपने बॉर्डर के रंग को निर्दिष्ट नहीं किया तो बॉर्डर कलर = 
विशेषता का प्रयोग करें, तब आप <०4४> टैग में निर्दिष्ट रंग का प्रयोग करेंगे। यदि आप 
ऐसा नहीं करते हैं, तो डिफॉल्ट काले रंग का ही प्रयोग होगा। 


वैकल्पिक टेक्स्ट को डिस्प्ले करना 


वेब का प्रयोग सभी लोगों द्वारा किया जाता है और उनमें से कुछ नेत्रहीन भी हो सकते हैं। 
नेत्रहीन लोग वेब का कैसे प्रयोग करते हैं? स्क्रीन पढ़ने वाला सॉफ्टवेयर उनके लिए पेज को 
पढ़ता है। लेकिन जब उनका सामना इमेज से होता है तो क्या होता है? 
इस सुविधा के लिए, आईएमजी टैग ALT विशेषता का प्रयोग करता है। यह डिस्प्ले हेतु 
वैकल्पिक टेक्स्ट को निर्दिष्ट करने के लिए प्रयोग होता है। यह विशेषता लाभदायक हो सकती 
है यदि- 
° प्रयोक्ता केवल टेक्स्ट ब्राउजर का प्रयोग करे। 
१ प्रयोक्ता इमेज बंद करे ताकि फाइल शीघ्र लोड हो सके। 
° ब्राउजर इमेजेज को सही से डिस्प्ले नहीं करे। 
° इमेजेज डिस्प्ले नहीं होती क्योंकि लिंक्स सही तरह से काम नहीं कर रहे हैं। 
* जब इमेज लोड होती है तो टेक्स्ट डिस्प्ले नहीं होता। 
आइए अब हम अपने वेब पेज को देखते हैं और जानते हैं कि इमेज गैलरी कैसे बनाई 
जाती है। इस सारणी के लिए चित्र 9.।8 में स्रोत कोड को देखें। इसमें कुछ भी असाधारण 
नहीं है। सारणी में प्रत्येक पांच सेल के साथ पांच पंक्ति हैं जिनमें बराबर अंतर है (चित्र 9..8)। 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


<table /00/0//55 ५ कक width="735"> 
EE 


<td width="245" height="245"><img src="l. jpg” height="245" width=”245" 
<td width="245" height="245"><img src="2. jpg” height="245" width=”245" 
<td width="245" height="245"><img src="3.jpg” height="245" width=”"245" 
<td width="245" height="245"><img src="”7. jpg” height="245" width=”245" 








REE 
<tr> 


<td width="245" height="245"><img src=”4. jpg” height="245" width ="245" 
<td width="245" height="245"><img src=”5. jpg” height="245" width="245" 
<td width=”245" height="245"><img src=”6. jpg” height="245" width="245" 
<td width=”245" height="245"><img src=”8.jpg” height="245" width="245" 








</tr> 
</table> 









































आशानुरूप इसके अंतर्गत प्रत्येक <> </८> युग्म में पांच <।0> </> युग्म हैं, जो 
प्रत्येक पंक्ति में पांच सेल का प्रतिनिधित्व करते हैं। प्रत्येक सेल में इमेज होती है और इमेज का स्वयं 
का कार्य है अन्य इमेज को लिंक करना। इसलिए कोड <a href= “page.htm”> <img 
src=im80.jpg></३> के रूप में हो सकता है जहां <३></३> युग्म हायपरलिंक को दर्शाता 
है और <> टैग थम्बनेल को दर्शाता है। स्रोत कोड का निरीक्षण कर इसकी पुष्टि करें। 


9,5.]] वेब पेज को इंटरएक्टिव बनाना-हायपरलिंक्स 


इंटरनेट मानवजाति के सबसे बड़े संसाधनों में से एक है क्योंकि यह संसाधनों को एक-दूसरे 
से जोड़ता है और माउस पर क्लिक करके, आप विश्व में कहीं पर भी स्थित मशीन के पेज 
पर जा सकते हैं। हम इन्हें हायपरलिंक्स कहते हैं। इस खंड में, हम उन टेगों के बारे में जानेंगे 
जिनसे यह होता है। <4> टेक्स्ट </> सबसे आसान टैग है, लेकिन अभी भी यह सबसे 
अधिक महत्त्वपूर्ण टैग युग्म है। 

टैग के मध्य के टेक्स्ट को लिंक में बदला जाता है। यह लिंक समान पेज पर अन्य 
अनुच्छेद, समान फोल्डर में अन्य मशीन के पेज का भी लिंक हो सकता है। लेकिन स्वयं में 
यह टैग बेकार होगा, क्योंकि इस बारे में अभी तक कुछ नहीं दर्शाया जाता कि यह किस पेज 
से लिंक करता है। 


Yo 
॥ध 22206: 
/></td> 
/></td> 


/></td> 
/></td> 
Yo Eos 
/></td> 








कम्प्यूटर और सचार प्रौद्योगिकी 


इसका पता HREF = विशेषता द्वारा लगाया जाता है । अतः, हायपरलिंक टैग निम्न प्रकार 
से होगा- 
<A HREF="http:/mywebsite.com/mywebpage.htm”>link to my site 


</A> 


यह क्या कहता है? HF = विशेषता का मान होता है जो m़ ९४९.००७ साइट 
पर my webpage.htmn पेज को निर्दिष्ट करता है। जब तक यह पेज वास्तव में इस साइट 
पर होता है और इस साइट को होस्ट करने वाला सर्वर वेब पेज से जुड़ा होता है, आप इस 
पेज को खोलने में समर्थ होंगे - लिंक पर क्लिक करते ही यह पेज डिस्प्ले होगा। 

वर्ल्ड वाइड वेब द्वारा एड़ेसिंग योजना को प्रयोग किया जाता है जिसे यूआरएल के नाम 
से जाना जाता है जो यह बताता है कि वेब पर फाइल कहां है। यूआरएल का अर्थ है 
यूनिफॉर्म रिसोर्स लोकेटर (इसे कभी-कभी यूनिवर्सल रिसोर्स लोकेटर भी कहते हैं) , जो कि 
इंटरनेट पर प्रलेख का पता होता है। आप नोटिस करेंगे कि आपके बेब पेज हेतु यूआरएल 
आपके वेब ब्राउजर के एड्रेस बार में डिस्प्ले किया गया है। 

अपना माउस कर्सर हायपरलिंक के ऊपर रखें। नोटिस करें कि कर्सर आकारों को नुकीले 
फिंगर आयकॉन में परिवर्तित कर देता है। साथ ही, आप वह एड़ेस देखेंगे जिस पर यह 
हायपरलिंक पेज के सबसे नीचे बाएं कोने पर स्टेटस बार में इंगित करता है। 


यूआरएल के प्रकार 
यूआरएल दो प्रकार के होते हैं, एन्सोल्यूट यूआरएल और रिलेटिब यूआरएल। 

एब्सोल्यूट यूआरएल में इंटरनेट पर फाइल का संपूर्ण पता होता है। इसलिए एब्सोल्यूट 
यूआरएल में होस्टनेम, फोल्डर का नाम, फाइल का नाम और प्रोटोकॉल (नियमावली) होता 
है जिसका प्रयोग यह वेब पेज या फाइल से कनेक्ट होने के लिए करता है। 

उदाहरण के लिए- Http://www.ncert.nic.in/html/school curriculum.htm 

नोटिस करें कि हम इंटरनेट पर फाइल का संदर्भ लेते रहते हैं। वेबसाइट न केवल वेब पेजों 
को बल्कि इमेज, वीडियो, ऑडियो, प्रलेखों, जिप्ड फाइलों या फोल्डरों और व्यावहारिक रूप 
से किसी भी प्रकार की डिजिटल फाइल को होस्ट करती है। ब्राउजर अधिकतर वेब पेज के 
साथ इंटरएक्ट करता है, जो कि HTM. प्रकार की फाइलें हैं। सभी अन्य फाइलें आपकी 
मशीन पर डाउनलोड हो जाती हैं (या यदि प्रोग्राम है तो कार्यान्वित किया जाता है)। 

दूसरी ओर रिलेटिव यूआरएल लघु रूप है, और समान सर्वर पर या समान फोल्डर में 
फाइल की ओर संकेत करता है। रिलेटिव यूआरएल में केवल फोल्डर का नाम और फाइल 
का नाम अथवा केवल फाइल का नाम होता है यदि वांछित लिंक और संसाधन वाले वेब पेज 
समान फोल्डर में हां। 

उदाहरण के लिए - /html /school.htm 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


यह यूआरएल #णा। फोल्डर में स्थित फाइल $०h००।.॥४ को निर्देशित करता है। यह 
फोल्डर लिंक वाले वेब पेज के रूप में समान साइट पर होता है। हम संपूर्ण पता ऐसे लिख 
सकते हैं- 

http: // www. my website.com/html/school.htm लेकिन लघु रूप ही काफी हे। 


हायपरलिंकिंग के प्रकार 


जैसा कि हम पहले उल्लेख कर चुके हैं, हायपरलिंक्स समान पेज या किसी अन्य पेज के 
अंतर्गत गंतव्य तक हो सकता है। हम हायपरलिंक्स को स्क्रिप्ट या अनुप्रयोगों को शुरू करने 
और अन्य कार्य करने के लिए प्रयोग कर सकते हैं। उदाहरण के लिए, हम स्लाइड शो शुरू 
कर सकते हैं, फिल्म चला सकते हैं या ई-मेल भी भेज सकते हैं। हम इन क्रियाओं हेतु 
विशेषताओं की जांच करते हैं। 


बाहय लिंकिंग 
यह हायपरलिक्स का शायद सबसे सामान्य प्रयोग है। पेज | पर 2 का हायपरलिक्स लिंक 


होता है। जैसा कि हम पहले उल्लेख कर चुके हैं, पेज 2 समान साइट या दूरस्थ साइट पर 
भी हो सकता है। 

<A HREF = “http://my webside.com/my life.htm> link to my file 
</> फॉर्मेट है। यदि गंतव्य (डेस्टिनेशन) फाइल जो इस मामले में m४ fle. है, वेब 
पेज है तो ब्राउजर स्वयं इसे संभालता है और नया वेब पेज डिस्प्ले होता है। 

मान लीजिए यदि गंतव्य (डेस्टिनेशन) फाइल वीडियो है तब ब्राउजर विषय को डिस्प्ले 
करने के लिए मीडिया प्लेयर से मदद लेता है। हम ऐसे सॉफ्टवेयर को प्लग इन कहते हैं। कुछ 
मामलों में जावास्क्रिप्ट का भी प्रयोग होता है। ब्राउजर टेक्स्ट और इमेज डिस्प्ले कर सकता 
है, लेकिन अन्य सभी मीडिया को बाह्य सहयोग की आवश्यकता होती है। इसलिए आप 
वीडियो, ऑडियो, एनिमेशन चलाने के लिए प्लग इन स्लाइड शो चलाने के लिए स्क्रिप्ट या 
एक्जिक्यूटेबल (.९९) प्रोग्राम का प्रयोग कर सकते हैं। 

आइए विंडोज मीडिया प्लेयर के प्रयोग से वीडियो क्लिप चलाने के उदाहरण को समझते हैं। 


आपको वेब पेज के सबसे ऊपर <७०५५> </७०५४> टैग में निम्नलिखित कोड लिखना होगा। 
<embed type="application/x-mplayer2" pluginspage="http:// 
www.microsoft.com/Windows/MediaPlayer/” name=" mediaplayerl" 


autostart="false” width="320" height="240" src="myvideo.wmv” /> 
सुनिश्चित करें कि 0] फाइल के रूप में समान नामावली में प्राए ४4९०.७४ नाम 
से वीडियो फाइल हो या वीडियो फाइल की ओर संकेत करने के लिए 57८ विशेषता को बदलें। 
आइए <९०७९०> टैग की विशेषताओं की समीक्षा करें- 
१ {४९ =”” उन एम्बेडेड वस्तुओं के प्रकार को परिभाषित करता है आप जिनका प्रयोग 
करना पसंद करेंगे। यह टैग वेब पेज में एम्बेडेड करने के लिए वीडियो मीडिया प्लेयर 
के लिए अनिवार्य है। 





कम्प्यूटर और संचार प्रौद्योगिकी 


° ]प४7579४८ =”” इस विशेषता की आवश्यकता केवल तब होती है यदि प्रयोक्ता 
कम्प्यूटर विंडोज मीडिया प्लेयर प्लग इन नहीं करता, यदि आप आश्वस्त नहीं हैं तो 
इसको सम्मिलित करें। 

° 2९ =”” इस विशेषता ने इसकी एम्बेडेड वस्तु को विशेष नाम दिया है, जो आपको 
बहुगुणक एम्बेडेड वस्तुओं को रखने और उन तक पहुंचने में सहायता करेगा (नामित 


एंकरों के खंडों को निम्नवत्‌ देखें)। 
° 2uाt०ऽ३7 5”” का तात्पर्य है कि जब पेज लोड किया जाए तो वीडियो स्वतः आरंभ 
होगा या नहीं। 


° ।dth=”” और ९६“ =”” का आशय विंडोज मीडिया प्लेयर के एम्बेडेड विंडो का 
पिक्सल में आकार से है। यदि आप दर्शकों को इसके वास्तविक रिजोल्यूशन पर वीडियो 
दिखाना चाहते हैं तो चौड़ाई एवं लंबाई विशेषता को हटा दें। 

* 572 से तात्पर्य स्रोत से है। यह उस मार्ग को बताता है जो आप दर्शाना चाहते हैं। 


इंटर्नल लिकिंग 

जैसा कि हम उल्लेख कर चुके हैं, लिंक समान पेज का अन्य भाग भी हो सकता है। 
सामान्यतः, जब आपके पास विषय पेज होता है जिसमें प्रलेख के विभिन्न खंडों की सूची और 
स्वयं खंड, सभी समान वेब पेज पर हों तब आपको इसकी आवश्यकता होगी। 


आपको रेफरेंस मार्कर के प्रयोग से पेज के विशेष खंड को अंकित (मार्क) करना होगा। 
यह नेम (NAM) विशेषता के प्रयोग से किया जाता है। हम इस उदाहरण को देखते हें- 


<html> 


<A NAME="CONTENTS”>Contents </A> विषय-वस्तु 





<A HREF=" #chapl">Chapter l</A> अध्याय | 

<A HREF="#chapl">Chapter 2</A>Chapter 2 अध्याय 2 
<p>Introduction: प्रस्तावना 

Text of Introduction प्रस्तावना का टेक्स्ट 
<A NAME ="chapl">Chapter l</A> अध्याय | 

Text of chapter 7 अध्याय । का टेक्स्ट 
<A HREF="# CONTENTS”>Back to contents</A> | विषय पर वापिस आना 


<A NAME ="chap2">Chapter 2</A> अध्याय 2 


Text of chapter 2 अध्याय 2 का टेक्स्ट 


<A HREF=" # CONTENTS”>Back to contents</A> | विषय पर वापिस आना 


</html> 





एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


उपर्युक्त आउटपुट से, आप नोटिस करेंगे कि टैग युग्म और <A NAME= “ "> </A> 
विशेषता एवं टैग युग्म और <^ HREF = “”> </^> विशेषता को लिंक्स में बदला जाता 
है। आइए देखें कि ये लिंक्स क्या निर्देशित करते हैं। 

लिंक अध्याय । या अध्याय 2 पर क्लिक करने के बाद संबंधित अध्याय आरंभ होता है। 
प्रत्येक अध्याय के सबसे नीचे 'बैक टू कंटेंट” वाला लिंक विषय-सूची पर वापस लाएगा। टैग 
युग्म <4 NAME = “”> </A> को नेम्ड एंकर कहते हैं और वास्तव में यह वेब पेज पर 
दिखाई नहीं देता है। यह टैग लिंक हेतु डेस्टिनेशन के रूप में कार्य करता है। इसलिए, जब 
आप लिंक अध्याय । पर क्लिक करते हैं, आप इस एंकर पर पहुंच जाते हैं। इसी प्रकार से, 
जब आप लिंक बैक टू कंटेंट पर क्लिक करते हैं, आप विषय-सूची हेतु एंकर पर आ जाते हैं। 

अन्य टैग युग्म, <4 HREF = “ “> </A> किसी अन्य लिंक के समान होता है लेकिन 
संदर्भित डेस्टिनेशन से पूर्व हैश (#) होता है। यह हैश समान पेज पर नेम्ड एंकर को देखने 
के लिए ब्राउजर को प्रेरित करता है। 

नेविगेशन की यह तकनीक पेज के अतर्गत तब बहुत ही उपयोगी होती है जब आप किसी 
प्रलेख को एक साथ रखना चाहते हैं और इसे कई वेब पेजों में विभक्त नहीं करना चाहते। 
इस पेज को प्रिंट या डाउनलोड करने से एक बार में सारा प्रलेख आ जाएगा। यह एक छोटा 
वेब पेज भद्दा भी लग सकता है लेकिन यदि आपके पास अधिक लंबा वेब पेज है तो यह 
निश्चित ही बहुत उपयोगी है और आप बार-बार आगे-पीछे आ-जा सकते हैं या खंड विशेष 
को ढूंढ सकते हैं। 

यदि आप किसी विभिन्न वेब पेज पर विशेष खंड को निर्देशित करना चाहते हैं तो भी आप 
इस तकनीक का प्रयोग कर सकते हैं। इस मामले में, हायपरलिंक विभिन्न वेब पेज और उस 
वेब पेज पर नेम्ड एंकर को निर्देशित करेगा। निम्नलिखित उदाहरण देखें- 


<a href=“index.html#section2"> 
लिंक ind९%.॥(] वेब पेज पर नामित खंड 2 एंकर को निर्देशित करता है। 


इमेजों का लिंक के रूप में प्रयोग करना 


बड़ी इमेज की बड़े आकार की फाइल होती है और यह लोड होने में समय लेती है। इसके 
समाधान हेतु, हम वेब पेज पर इमेज को छोटी इमेज के साथ दर्शाते हैं। इसे थम्बनेल कहते 
हैं। इसलिए प्रयोक्ता को बड़ी इमेज देखने के लिए इस इमेज पर क्लिक करना होगा। थम्बनेल 
का प्रयोग न केवल इमेज दरशनि के लिए अपितु किसी भी संसाधन को दर्शाने के लिए भी 
होता है। उदाहरण के लिए, आपको पुस्तक वाले वेब पेज को दर्शाने के लिए पुस्तक के कवर 
पेज का चित्र पसंद आ सकता है। 

इस मामले में टैग <A HREF=” "> </A> और <IMG SRC => टैगों के संयोजन का 
प्रयोग किया गया है। इस उदाहरण में देखें- 


<A HREF="mywebpage.htm”><IMG SRC="myphoto.jpg”"></A> 
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आप चित्र डिस्प्ले करने के लिए <IMG SRC=” my phot0.jP6”> टैग का प्रयोग करेंगे। 
इस टैग को <A HREF => </A> टैग के साथ संलग्न करने से, यह स्वयं चित्र को लिंक में बदल 
देता है। इसलिए इस लिंक पर क्लिक करने पर नया पेज, mm ४९०३४९.॥ खुल जाएगा। 

नोट करें कि नए पेज में क्या है इस बारे में यह कुछ नहीं बताता है। यह केवल एक 
अलग पेज से लिंक करता है। यहां तक कि HTML की यह विशेषता अगले पेज को नियंत्रण 
सौंप देती है और उस पेज को संबंधित संसाधनों को संभालना होता है। 
ई-मेल लिंक्स 
यदि आप अपने वेब पेज के बारे में या विषय-वस्तु के बारे में किसी की टिप्पणी जानना चाहते 
हैं या आप किसी से संपर्क करना चाहते हैं तो इसका सबसे आसान तरीका है कि आप अपने 
संपर्क करने का संपूर्ण ब्यौरा (पता या टेलिफोन नम्बर) दें। ई-मेल लिंक उपलब्ध कराना 
सबसे आसान तरीका है ताकि आपको सीधा वहां से ई-मेल भेजा जा सके। इसके लिए भी 
<A HREF= </A> टैग का प्रयोग होता है। इस उदाहरण को देखें- 

<A HREF="mailto: dceta.ncertenic.in">Contact Us</A> 

विशेषता का “2/]६०:” भाग आपके डिफॉल्ट मेल क्लाइंट को आरंभ करता है (नीचे 
चित्र 9.।9 देखें)। यद्यपि आपको मेल भेजने के लिए अपने मेल क्लाइंट को निर्धारित 
(Confएु॥7९4) करना चाहिए। यदि आप सामान्यत: ब्राउजर आधारित मेल प्रोग्राम जैसे 
हॉटमेल या याहू या जी मेल का प्रयोग करते हैं, तो आप इसे निर्धारित नहीं कर सकते हैं। 
सामान्यतः विंडोज में, आउटलुक एक्सप्रेस डिफॉल्ट ई-मेल क्लाइंट होता है, यदि आपने अन्य 
किसी ई-मेल क्लाइंट को निर्धारित नहीं किया हो। इसलिए यह टैग उपयोगी होगा और उन्हीं 
मशीनों पर यह सेवा उपलब्ध होगी जहां ई-मेल क्लांइट को निर्धारित किया जाता हो। फिर 
भी, यह बहुत ही उपयोगी एवं समय की बचत करने वाली विशेषता है। 
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चित्र 9.9 - ई-मेल कम्पोजिग विंडो 


एंकर टैग के भीतर ई-मेल पते को विनिर्दिष्ट करने से ई-मेल कम्पोजिंग विंडो के टेक्स्ट 
बॉक्स “४०” में उल्लेखित पते में अंतःस्थापित करने के लिए ब्राउजर को स्वत: निर्देश मिल 
जाता है। 


एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 
9.5.2 वेब पेज को अंतरक्रियात्मक बनाना - इनपुट फॉर्म 


पूर्व खंड में, हमने <^> </A> टैग युग्म के प्रयोग से वेब की अंतरक्रियात्मकता के बारे में 
जाना। वेब द्वारा केवल हायपरलिंक के रूप में एक प्रकार की अंतरक्रियात्मकता उपलब्ध 
कराई जाती है। यह हमें एक पेज से दूसरे पेज पर जाने की अनुमति देता है, लेकिन यह सभी 
कुछ पूर्व निर्धारित होता है। यदि आप एक प्रश्‍न का उत्तर ढूंढना चाहते हैं तो क्या होता है। 

इसके लिए आपके प्रश्‍न को सर्वर तक पहुंचाने की आवश्यकता है और किसी तरह से 
सर्वर आपके प्रश्‍न पर कार्रवाई करता है और उसका उत्तर देता है। HTM द्वारा भी ऐसी 
अंतरक्रियात्मकता की जा सकती है। यहां इनपुट के प्रकारों की एक रेंज होती है जिन्हें भेजा 
जा सकता है। यह न केवल वेबसाइट के प्रयोक्ता के प्रश्नों के उत्तर देने में सहायता करता 
है बल्कि प्रयोक्ताओं से सूचनाएं भी प्राप्त करता है। 

इसमें टैग युग्म <Form> </F0rm> का प्रयोग होता है। आइए इसके उपयोग को जानें। 
प्राथमिक रूप से इस टैग टेक्स्ट के इनपुट को अनुमति देनी चाहिए। तब इसे संदेश हेतु गंतव्य 
और प्रेषण तंत्र को निर्धारित करना चाहिए। यह एक्शन (क्रिया) और मैथड (विधि) विशेषता 
द्वारा प्राप्त किया जाता है। 

जहां सूचना कार्रवाई करने हेतु भेजी जाएगी वहां ACTION विशेषता को निर्दिष्ट किया 
जाता है। सूचना कार्रवाई संबंधी डेस्टिनेशन सीजीआई प्रोग्राम, जावास्क्रिप्ट कार्य या ई-मेल पता 
हो सकता है। सीजीआई या कॉमन गेटवे इंटरफेस (सीजीआई) एक सूचना सर्वर जो 
सामान्यतया वेब सर्वर होता है, से युक्त बाहय सॉफ्टवेयर, से इंटरफेसिंग हेतु मानक प्रोटोकॉल 
है। इन उदाहरणों को देखें- 


८७ प्रोग्राम को रिक्वेस्ट भेजना ACTION =” / cgi - bin / something . cgi” 
(relative url ) or ACTION =” http: // my 
website . com / cgi-bin / something. 


cgi “( absolute url) 


जावास्क्रिप्ट को रिक्वेस्ट भेजना ACTION = “ javascript:Some Function()* 
ईमेल पते को रिक्वेस्ट भेजना ACTION ="mailto:me@mywebsite.org” 





सर्वर को फॉर्म में सूचना भेजने की दो विधियां हैं - गेट एवं पोस्ट विधि। हम इसे निर्दिष्ट 
करने के लिए मैथड (विधि) विशेषता के <F0RM\> टैग का प्रयोग करते हैं। यद्यपि सर्वर 
और उससे संबंधित सॉफ्टवेयर पूर्व-निर्धारण करेंगे और इसलिए आपके पास विकल्प नहीं है 
लेकिन दोनों विधियों के मध्य भिन्नता को जानना उपयोगी है। 

गेट विधि में, संबद्ध कोड सहित प्रश्‍न या सूचना को एक्शन विशेषता द्वारा निर्दिष्ट 
यूआरएल से जोड़ा जाता है और इस नए यूआरएल प्रोसेसिंग (कार्रवाई) एजेंट को भेजा जाता 
है। जब फॉर्म से कोई खराब प्रभाव न हो तब “गेट” विधि का प्रयोग करना चाहिए। कई 
डाटाबेस सर्चेज का कोई दुष्प्रभाव नहीं होता और यह 'गेट' विधि हेतु उपयोगी अनुप्रयोग होते 
हैं। यही नहीं 'गेट' विधि इनपुट को 45 कैरेक्टर तक सीमित कर देती है। 





कम्प्यूटर और सचार प्रौद्योगिकी 


इसलिए यदि आप 9 ७९5४९.८० पर सौर ग्रहण 2009 को ढूंढ़ते हैं, तो जमा किया 
गया फॉर्म http://www.mywebsite.com/ search? q = solar+teclipse+2009 होगा। 
पोस्ट विधि में, फॉर्म की बॉडी में प्रश्‍न या सूचना शामिल की जाती है और इसे प्रोसेसिंग 
(कार्रवाई) एजेंट को भेजा जाता है। यदि फॉर्म पर कार्रवाई से संबंधित सेवा के दुष्प्रभाव हों 
तो (उदाहरण के लिए, यदि फॉर्म सेवा के लिए सब्सक्रिप्शन या डाटाबेस को संशोधित करता 
है) “पोस्ट' विधि का प्रयोग करना चाहिए। 
फॉर्म के तत्त्व 
यदि टैग एक्शन और मैथड को परिभाषित करते हैं तो हम इनपुट के लिए सूचना के फॉर्मेट 
को तैयार करते हैं और सर्वर को भेजते हैं। ये टेक्स्ट एंट्री फील्ड, चैक बॉक्स, रेडियो 
सलेक्शन्स, पासवर्ड एंट्री फील्ड, फॉर्म बटन्स, फाइल अपलोड फील्ड्स, या इमेज बटन के रूप 
में हो सकते हैं। इन सभी को <I४P07> टैग की विशेषताओं के रूप में परिभाषित 
करते हैं। 
<INPए> टैग की कई अन्य विशेषताएं हो सकती हैं जो “४P” विशेषता के मान 
पर आधारित हों। टाइप विशेषता इनपुट के प्रकार को निर्दिष्ट करती है जो हम प्रयोक्ता से 
चाहते हैं। इसे इंटरफेस तत्त्वों के निम्नलिखित प्रकारों को निर्मित करने के लिए प्रयोग किया 
जा सकता है- 
]. टेक्स्ट फील्ड 
पासवर्ड फील्ड 
रेडियो बटन 
चैक बॉक्स 
सब्मिट बटन 
रिसेट बटन 
इमेज बटन 
हिडन फील्ड 
TYPE= “TEXT” विशेषता इनपुट फील्ड का सामान्य प्रकार है। यह ऐसा स्थान निर्मित 
करता है जहां सूचना की एक लाइन टाइप की जा सकती है। 


REND PD 





<LABEL for="firstname">Name: </LABEL><br> Name: 
<INPUT type="text" id="firstname" size="20"><BR> 

<LABEL for="email">Email: </LABEL><br> Email: 
<input name="text" type="text" id="email" size="20"> 








इनपुट क्षेत्र में टाइप किए गए करेक्टरों को एस्टरिस्क (या कुछ अन्य करेक्टर) के रूप 
में डिस्प्ले करने के अतिरिक्त TYPE = “PASSWORD” विशेषता type = “TEXT” 
विशेषता के समान ही कार्य करती है। ट्रांसमिशन के दौरान पासवर्ड टेक्स्ट को स्क्रैंबल किया 
जाता है और जब सर्वर में फॉर्म डाटा प्राप्त किया जाता है तब इसे अनस्क्रंबल किया जाता है। 





एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


रेडियो बटन का प्रयोग तब किया जाता है जब प्रयोक्ता से विकल्पों में से केवल एक का 
चयन करने की उम्मीद की जाती है। TYPE = “7२७7॥0” कंट्रोल्स के सेट को निर्दिष्ट 
करता है जो कि जुड़े होते हैं ताकि एक समय पर प्रत्येक सेट में से एक रेडियो बटन का 
चयन किया जा सके। यदि प्रयोक्ता एक रेडियो बटन पर क्लिक करता है, तो सेट में से अन्य 
स्वतः अस्वीकृत हो जाते हैं। रेडियो बटन के सभी विकल्पों के समान नाम होने चाहिए। फॉर्म 
द्वारा भेजा गया मान रेडियो बटन का वह मान है जिसे अंतत: चयनित किया गया था। सेट 
में एक बटन में चेक्ड विकल्प जोड्ने से वह बटन पेज लोड होने पर पूर्व चयनित हो जाएगा, 
जो कि एक डिफॉल्ट मान है। निम्नलिखित उदाहरण देखें- 


<LABEL for="firstname">Name: 





</LABEL><br> Name: 








<INPUT type="text" id="firstname" size="20"><BR> <LABEL 





for="email">Email: ठ 
</LABEL><br> Sr 4 











<input name="text" type="text" id="email" size="20"> लक 
Gender<BR> 

<INPUT type="radio" name="sex" value="Male"> 

Male <INPUT type="radio" name=" sex" value="Female"> Female 





चैक बॉक्स के प्रयोग से प्रयोक्ता बैकल्पिक सेट में से बहुत सारे विकल्पों का चयन कर 
सकता है। चूंकि चेक बॉक्स अन्य बटनों से प्रभावित नहीं होता है, इसलिए यह संभव है कि 
एक समय में चैक्ड समूह एक से अधिक हो सकते हैं। इन्हें TYPE= “CHECKBOX” 
विशेषता के प्रयोग से निर्मित किया जा सकता है। नोट करें कि यह रेडियो बटन जैसा नहीं 
है, प्रत्येक चैक बॉक्स का विशिष्ट नाम होता है। इस पर क्लिक करने से यह चैक मार्क 
(“2%” अथवा “”) दिखाता है और दुबारा क्लिक से मार्क हट जाता है। वेब रूप में भेजा गया 
मान चैक बॉक्स का मान है यदि इसका चयन किया गया था, नहीं तो मान शून्य हो जाएगा। 
आप विशेष चैक्स बॉक्स को डिफॉल्ट मान के रूप में परिभाषित करने के लिए इसमें 
CHECKED विकल्प भी जोड़ सकते हैं। 


Language<br><input type="checkbox" name="optionl" 


value="hindi">Hindi<input type="checkbox" 
name="option2" value="english" checked>English 





TYPE = “SUBMIT” फॉर्म पर सब्मिट बटन निर्मित करता है और TYPE = “RESET” 
रिसेट बटन निर्मित करता है। सब्मिट बटन सभी चयनों तथा मान को एकत्रित करने के लिए 
वेब ब्राउज़र को निर्दिष्ट करता है और फॉर्म तत्त्वों में टेक्स्ट की प्रविष्टि करता है और 
<FORM> टैग के ACTION भाग में परिभाषित डेस्टिनेशन को इसे डिस्पैच करता है। 
रिसेट बटन फॉर्म को डिफॉल्ट स्थिति में पुनः सुरक्षित करता है। 


<INPUT type="submit" value="Send"><INPUT type="reset"> 





° Male ° Female 





Send | Reset | 








2 | 5 


















कम्प्यूटर और संचार प्रौद्योगिकी 


सब्मिट बटन या रिसेट बटन का विशेष आकार और साइज़ होता है, जो कि हो सकता 
है कि शेष वेब पेज के अनुसार नहीं हो। अतः आप TYP = “4788०” विशेषता के प्रयोग 
को बजाय इमेज का प्रयोग भी कर सकते हैं। जब प्रयोक्ता इमेज बटन पर क्लिक करता है 
तो फॉर्म, <F07> टैग की एक्शन विशेषता में निर्दिष्ट पते पर भेजा जाता है। 





<p align="center"> 


<INPUT TYPE=” ” SRC=" fl o3hstef 
र TE i This image works like the submit button 
NAME=” imageclick” 


ALIGN=top HEIGHT=50 WIDTH=50> 
This image works like the submit button 
</p> 


इसी प्रकार से TYPE = “BUTTON” प्रयोक्ता द्वारा “वेल्यू'” विशेषता में विनिर्दिष्ट 
टेक्स्ट से क्लिक-एबल बटन निर्मित करता है। जब बटन पर क्लिक करते हैं, यह ऑन 
क्लिक इवेंट चालू कर देता है। इस इवेंट को कुछ विशिष्ट कार्य करने के लिए बीबी स्क्रिप्ट 
या जावास्क्रिप्ट जैसी किसी भी स्क्रिप्टिग लैंग्वेज द्वारा आरंभ किया जा सकता है। यद्यपि, यदि 
इवेंट को प्रोग्राम नहीं किया गया है तो बटन क्लिक करने पर कुछ नहीं होगा। उदाहरण के 
लिए सब्मिट और रिसेट बटन विशेष प्रकार के बटन हैं जिनकी विशिष्ट कार्य करने के लिए 
पूर्व-प्रोग्रामिंग की गई है। 


Lama simple button | 


फाइल फील्ड से प्रयोक्ता फाइल अपलोड कर सकते हैं। प्रयोक्ता यह सत्यापन करने के 
पश्चात्‌ कि जिस सर्वर पर फॉर्म प्रोसेस किया जाएगा वह फाइल अपलोड को समर्थन करता 
है, वर्ड प्रोसेसर प्रलेख या स्कैन्ड प्रलेख, स्प्रैडशीट्स, चित्र जैसी किसी भी सूचना को भेज 
सकता है। ब्राउजर टेक्स्ट बॉक्स के साथ 'ब्राउज' बटन को डिस्प्ले करता है जिससे प्रयोक्ता 
फाइल इनपुट तत्त्व के मान के रूप में प्रयोग करने के लिए अपने कम्प्यूटर के स्टोरेज में से 
फील्ड का चयन कर सकता है। विशेषतया, आपके समक्ष यह विकल्प तब आएगा जब आप 
अपने ईमेल मैसेज से फाइलें अटैच करेंगे। 

तब आउटपुट निम्न होगा- 


<INPUT TYEFS"FTLE” NAME ="name” 

SHAE SES ON MATE (जग न SAO 0 | 
टेक्स्ट फील्ड और हिडन फील्ड में एक प्रमुख अंतर है अन्यथा यह समान है। हिडन 
फील्ड पेज पर दिखाई नहीं देता। इसलिए प्रयोक्ता हिडन फील्ड में कुछ भी टाइप नहीं कर 


सकते। TYPE= “4५९०” विशेषता प्राप्त होने वाले प्रोग्राम या कार्य हेतु सूचना विनिर्दिष्ट 
करने के लिए प्रयोग की जाती है जो कि प्रयोक्ता को दिखाई नहीं देती और इसे प्रयोक्ता बदल 








<INPUT TYPE="Button” VALUE="L am a simple button"> 











































एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 
भी नहीं सकता। अन्य सूचना को प्रोसेस करने के लिए प्रोग्राम या कार्य को सामान्यतः इस 
सूचना की आवश्यकता होती है। 

<INPUT TYPE="hidden” NAME="Language” VALUE="English"> 

हिडन फील्ड दिखाई नहीं देता, लेकिन जब फॉर्म भेजते हैं तब इसके साथ हिडन फील्ड 
भी भेजा जाता है। उपरोक्त उदाहरण में हिडन फील्ड उस प्रोग्राम के बारे में बताता है जो कि 
फॉर्म को संभालता है, और प्रयोक्ता अंग्रेजी भाषा को प्राथमिकता देता है। उदाहरण के लिए 
द्विभाषी या बहुभाषी साइटें तत्पश्चात्‌ सही भाषा का उपयोग कर सकती हैं। 











<SELECT> रै 


<SELECT> ग का प्रयोग ड्रॉप-डाउन सूची बॉक्स (ड्रॉप-डाउन मेन्यू भी कहा जाता है) 
और स्क्रॉलिंग सूची बॉक्स (इन्हें स्क्रॉलिंग मेन्यू भी कहा जाता है) को निर्मित करने के लिए 
किया जाता है। ड्रॉप-डाउन मेन्यू विनिर्दिष्ट किए गए विकल्पों के आधार पर रेडियो बटन के 
रूप में (केवल एक चयन हेतु) या चैक बॉक्स (बहु चयन अनुमेय है) के समान कार्य करता 
है। रेडियो बटन या चैक बॉक्स की तुलना में ड्रॉप-डाउन मेन्यू. का यह लाभ है कि यह कम 
स्थान घेरता है। लेकिन यह एक प्रकार से लाभप्रद भी नहीं है क्योंकि लोग मेन्यू में सभी 
विकल्प प्रत्यक्ष नहीं देख पाते हैं। साइज़ विशेषता द्वारा एक समय में एक से अधिक विकल्पों 
को दर्शाने के लिए मेन्यू को कस्टमाइज किया जा सकता है। ऐसी सूची विशेषतया तब दिखाई 
देती है जब प्रयोक्ता को किसी शहर या देश का चयन करना हो। 

<OPTION> ... </OPTION> टेग का प्रयोग सूची में डिस्प्ले की गई प्रत्येक मद 
को विनिर्दिष्ट करने के लिए किया जाता है। जब फॉर्म डाटा ट्रांसमिट किया जाता है, तो अंतिम 
चयनित विकल्प का मान वापिस हो जाता है। <0PTI0\> टैग में सलेक्टेड विशेषता को 
जोड़ना यह संकेत करता है कि जब पेज लोड होता है तो आरंभ में कौन-सा तत्त्व डिस्प्ले 
होगा। यदि यह नहीं दिया गया है तो डिफॉल्ट द्वारा प्रथम मद का चयन किया जाता है। 


<select name="abc"><option value="Math">Math 
</option><option value="Science">Science Math. कः 
</option></select> 


उपर्युक्त सूची ड्रॉप-डाउन सूची को डिस्प्ले करेगी चूँकि साइज विशेषता विनिर्दिष्ट नहीं 
को गई है। 
<TEXTAREA > टैग 
टेक्स्ट एरिया टेक्स्ट फील्ड है जो कि इकाई पंक्तियों में फैले होते हैं। इनका प्रयोग फॉर्म प्रयोक्ता 
से बहु पंक्ति इनपुट स्वीकृत करने के लिए किया जाता है। अधिकतर अन्य फॉर्म फील्ड की तरह 
टेक्स्ट एरिया <I\PU7> टैग के साथ परिभाषित नहीं किए गए हैं। इसके बजाय हम 
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<TEXTAREA> ग प्रविष्ट करते हैं जब हम टेक्स्ट एरिया को आरंभ करना चाहते हैं; और 
समापन </TEXTAREA> टैग का प्रयोग करते हैं जब हम एरिया को समाप्त करना चाहते 
हैं। इन टैगों के मध्य जो भी लिखा हो वह टेक्स्ट एरिया बॉक्स में प्रस्तुत किया जाएगा। स्क्रॉल 
बार स्वयं क्रियाशील हो जाएंगे यदि टेक्स्ट इनपुट विनिर्दिष्ट कॉलमों या पंक्तियों की दिखाई 
पड़ने वाली संख्या से अधिक है। 

उपर्युक्त सूची 2 पंक्तियों और 20 कॉलमों सहित टेक्स्ट एरिया को डिस्प्ले करेगी जैसा 
कि निम्नलिखित आउटपुट में डिस्प्ले किया गया है- 


Address<br><textarea name="as"™ rows="2™ Address 
cols="20"></textarea> 


9.6 अंतरक्रियात्मकता को बढ़ाना - वेब प्रौद्योगिकियों में प्रवृत्तियाँ 


इस अध्याय में हमने दो प्रकार की अंतरक्रियात्मकता के बारे में जाना। हायपरलिक्स और इनपुट 
फॉर्म वेब प्रौद्योगिकियों का तेजी से विकास हुआ है और आज इनमें कई विशेषताएं हैं जिनके 
बारे में कुछ साल पहले तक हमें कोई जानकारी नहीं थी। 

आजकल वेबसाइट इंटरएक्टिव फोरमों, समृद्ध मल्टीमीडिया अनुप्रयोगों और यहां तक कि 
रेडियो स्टेशनों को सहायता प्रदान करते हैं। वेबसाइटें वाणिज्यिक व्यापारों जैसे बैंकिंग, बुकिंग 
और आरक्षण और शॉपिंग में भी सहायक होती हैं। इन सभी वेब विशेषताओं के लिए बड़ी 
मात्रा में सूचना भंडारित और प्राप्त की जानी होती है। उन्हें अलग-अलग प्रयोक्ताओं के लिए 
अलग-अलग सूचना को भी समर्थित करने वाला होना चाहिए। 

भारतीय रेल टिकट आरक्षण प्रणाली एक अच्छा उदाहरण है। अलग-अलग लोग 
अलग-अलग स्थानों के लिए अलग-अलग ट्रेनों में अलग-अलग श्रेणियों में अलग-अलग 
तिथियों के लिए टिकट का अनुरोध करते हैं। यह प्रणाली साथ-साथ प्रत्येक प्रयोक्ता को 
उनके नाम, आयु इत्यादि सुरक्षित करते हुए, सूचना उपलब्ध कराती है और तद्नुसार उनसे 
प्रभार लेती है। यह प्रभारण बैंकों के साथ इंटरलिंकिंग द्वारा वेब पर भी किया जाता है। प्रत्येक 
संभावना हेतु भिन्न वेब पेज निर्मित करना असंभव है। इसके लिए ऐसी प्रौद्योगिकी की 
आवश्यकता है। जिसके द्वारा प्रयोक्ता की आवश्यकताओं के आधार पर सर्वर द्वारा एक नया 
पेज निर्मित कर प्रयोक्ता के ब्राउजर को भेजा जाए। इन्हें हम डायनेमिक वेब पेज कहते हैं। 


9,6.] डायनेमिक वेबसाइटें 


डायनेमिक वेब पेज वाली वेबसाइटें डाटाबेस समर्थित होती हैं। वेब पेज में खाली टेबलें होती 
हैं जिन्हें प्रयोक्ता के अनुरोध पर भरा जाता है। एक सामान्य-सा उदाहरण लेते हैं- गूगल सर्च 
इंजन। आप सर्च करने के लिए शब्द या वाक्य डालते हैं और सर्च बटन पर क्लिक करते हैं। 
कुछ सेकेंड में ही वेब पेज आपके द्वारा वांछित जानकारी को सूची वाली वेबसाइटों के साथ 
पुनः निर्मित हो जाता है। 
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हम इनपुट किए गए सर्च वर्ड को की-वर्ड कहते हैं। माना कि आपके की-वर्ड थे 
“ भारत में अगला सूर्य ग्रहण''। आप वास्तव में यह जानना चाहते थे कि “भारत में अगला 
सर्य ग्रहण कब होगा?'' अतः जब आपने सर्च बटन पर क्लिक किया तो आपने सर्वर से इस 
प्रश्‍न का उत्तर देने का अनुरोध किया। हम आपके अनुरोध को प्रश्‍न कहते हैं। आपने सर्वर 
से प्रश्‍न पूछा। सर्वर ने आपके प्रश्‍न की जानकारी से मिलते हुए डाटाबेस को देखकर आपके 
प्रश्‍न से संबंधित सूचना के साथ वापस उत्तर दिया। 

न केवल सर्च इंजन अपितु विभिन्न प्रकार के वेब अनुप्रयोग डायनेमिक साइटों का प्रयोग 
करते हैं। ऑनलाइन लाइब्रेरियों, शब्दकोशों, एनसाइक्लोपीडिया और बुक स्टोरों को डायनेमिक 
विशेषताओं की आवश्यकता होती है। ई-मेल प्रदाताओं, सोशल नेटवर्किंग साइटों, ऑनलाइन 
पाठ्यक्रमों, शॉपिंग मॉलों और पर्यटक ब्यूरो को भी डायनेमिक विशेषताओं की आवश्यकता 
होती है। यही नहीं, कोई साइट जिसका आशय निरंतर परिवर्तनशील सूचना प्रदान करना होता 
है, को तथा विभिन्न प्रयोकताओं की भिन्न-भिन्न जानकारी के लिए डायनेमिक प्रौद्योगिकियों 
की सहायता की आवश्यकता होती है। डायनेमिक वेबसाइटों को निर्मित करने के लिए 
प्रोग्रामिंग प्रोद्योगिकियों जैसे- एक्टिव सर्वर पेजेज (३), जावा सर्वर पेजेज (७) और 
हाइपरटेक्स्ट प्री-प्रोसेसर (ए) का प्रयोग किया जाता है। इन साइटों को सूचना एकत्र करने 
के लिए डाटाबेस की तथा प्रश्‍न जानने के लिए तथा प्रयोक्ता के प्रश्नों का उत्तर प्राप्त कर 
उन तक पहुंचाने के लिए सर्वर की आवश्यकता होती है। 


9,6.2 विषय-वस्तु, शैली और कोड को पृथक करना 


जब आपने हमारे वेब पर पेज की एचटीएमएल कोडिंग देखी होगी तो आपने नोट किया होगा 
कि कोडिंग, डिजाइन तत्व जैसे- टेबल्स, फोन्ट्स, रंग तथा वेब पेज की विषय-वस्तु सबको 
एक रखा गया है। इससे न केवल वेब पेज धीरे-धीरे लोड हुआ अपितु इसमें परिवर्तन करना 
भी कठिन हो गया। इसके लिए ग्राफिक डिजाइनर की जो अधिकतर वेब पेज कैसा दिखेगा 
यह कार्य देखता है, विषय संबंधी विशेषज्ञ की जो वेब पेज की विषय-वस्तु में रुचि रखता 
है और प्रोग्रामर की जो एचटीएमएल कोड को देखता है, एक साथ मिलकर कार्य करने की 
आवश्यकता है। हर बार जब एक नया पेज बनाना हो, इन सभी को पुनः साथ कार्य करना 
होता है। 

इन विधियों द्वारा अलग-अलग हज़ारों पेजों से डायनेमिक साइट विकसित करना और उन्हें 
प्रबंधित करना काफी कठिन होगा। एक बेहतरीन प्रौद्योगिकी द्वारा हम डिजाइन, विषय-वस्तु 
और प्रोग्रामिंग तत्वों को पृथक कर सकते हैं। 

कास्केडिंग स्टाइल शीट्स नामक इस प्रौद्योगिकी से सभी डिजाइन तत्वों - रंग, इमेज, 
स्थिति, फोन्ट, साइज़ और लेआउट को पृथक फाइल-स्टाइल शीट फाइल में रखा जाता है। 
विषय-वस्तु को टेक्स्ट फाइल या डाटाबेस के रिकॉर्ड में रखा जाता है। एचटीएमएल कोड 
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को अन्य एडवांस कोड के साथ डायनेमिक विशेषताओं के समर्थन हेतु वेब पेज में रखा जाता 
है। स्टाइल शीट और वेब पेज दोनों मिलकर टेम्प्लेट के रूप में कार्य करते हैं जो कि 
पूर्वनिर्धारित शैली (स्टाइल) तत्वों का कंटेनर है। जब प्रयोक्ता पेज खोलता है तो विषय-वस्तु, 
शैली और कोड क्रियात्मक रूप से मिलकर वेब पेज तैयार करते हैं। 

अब आप कास्केडिंग स्टाइल शीट्स और डाटाबेसों की सहायता से विषय-वस्तु विकास 
पर ध्यान केन्द्रित कर सकते हैं। एक बार तैयार होने पर स्टाइल शीट्स, डाटाबेस और वेब पेज 
कोड तब तक वही रहेगा जब तक कि आप इसमें संशोधन न करना चाहें। डाटाबेस में नई 
विषय-वस्तु आ जाती है और इससे वेबसाइट की विषय-वस्तु को बार-बार नवीकृत करना 
सरल हो जाता है। 


ह 


° इंटरनेट का एक प्रमुख अनुप्रयोग वर्ल्ड वाइड वेब (छ) है। 

१ वेब प्रलेखों, छवि (इमेज), ऑडियो, वीडियो अथवा सॉफ्टवेयर फाइलों का एक इंटरकनेक्टेड ( अंतर-संयोजित) 
सेट कहा जा सकता है। 

१ वेब में वेब पेजों और प्रोग्रामों के अनुरोध के लिए और उन्हें पूरा करने के लिए हाइपर टेक्स्ट मार्कअप लैंग्वेज 
का प्रयोग होता है। ब्राउजर एचटीएमएल को पढ्ने और उनकी व्याख्या करने के अनुकूल डिजाइन किए जाते हैं। 

° एचटीएमएल में टैग होते हैं; एचटीएमएल टैग का सामान्य फॉर्मेट है <टैग_नाम> प्रभावित टेक्स्ट अथवा इमेज 
</रैग_नाम> 

१ टैगों की भिन्न-भिन्न विशेषताएं होती हैं और इनके भिन्न-भिन्न मान (वैल्यू) होते हैं। साथ में वे एचटीएमएल 
टैगों की परिधि और कार्यात्मकता को बढ़ा देते हैं। 

° आपको अपना कोड लिखने के लिए एचटीएमएल एडीटर और अपने वेब पेज के परीक्षण के लिए ब्राउजर की 
आवश्यकता होगी; ब्राउजर भिन्न होते हैं क्योंकि वे विशिष्ट टैगों की व्याख्या करते हैं। अतः अपने वेब पेज को 
भिन्न-भिन्न लोकप्रिय ब्राउजरों पर परीक्षण करना चाहिए। 

° वेब पेज की आधारभूत संरचना है 
ETAL 5 

<head> </head> 


<body> </body> 
5 / तहत 


° <॥९३०> </॥९३०> टैग युग्म का कोड ब्राउजर द्वारा प्रदर्शित नहीं किया जाता; शीर्षक (टाइटल) टैग एक 
अपवाद्‌ है; यह ब्राउज़र विंडो के टाइटल बार में प्रदर्शित किया जाता है। 


१ स्क्रिप्ट, फोन्ट्स, मेटा डाटा हेड सेक्शन में होता है। 
* ब्राउजर विंडो में दिखाई देने वाले वेब पेज के सभी तत्व <७००४> </७०५छ> टैग में होते हैं। 


° साइज, कलर, फोन्ट से संबद्ध टैगों का प्रयोग वेब पेज के टेक्स्ट तत्वों को रेखांकित करने के लिए किया जाता 
है। आप बोल्ड, इटैलिक या अंडरलाइन के प्रयोग द्वारा भी रेखांकित कर सकते हैं। 




























एचटीएमएल का प्रयोग करते हुए वेब पेज डिज़ाइनिंग 


न को पैराग्राफ में व्यवस्थित किया जा सकता है और टेक्स्ट के पैराग्राफ अथवा लाइनों को <9> </9> और 

<> टेगों के प्रयोग से एक-दूसरे से पृथक किया जा सकता है। 

« व्यवस्थित और अव्यवस्थित सूची टेगों के प्रयोग से सूचियां तैयार और प्रस्तुत की जा सकती हैं; टाइप विशेषता 
के प्रयोग से सूची मदों को भिन्न-भिन्न प्रकार से क्रमांक दिया जा सकता है। 

° <table></t2ble> रैगों का इसके संबद्ध टैगों और विशेषताओं के साथ दो प्रकार से प्रयोग किया जाता है; 
एक विषय-वस्तु के विभिन्न ब्लॉकों को पृथक करने के लिए और दूसरा विषय-वस्तु को सारणी के रूप में प्रस्तुत 
करने के लिए। 

° टेबल में पंक्तियां और सेल होते हैं; इन्हें बैकग्राउंड इमेज के प्रयोग से संचित किया जा सकता है और सुंदर बनाया 
जा सकता है और उनके साइज और विषय-वस्तु को नियंत्रित किया जा सकता है; टेबलों को अन्य टेबल के 
भीतर रखा जा सकता है। 

० वेब पेज में इमेज, ऑडियो और वीडियो फाइलों को रखा जाता है। यद्यपि ब्राउजर स्वयं इमेज प्रदर्शित करता है 
तथापि उन्हें ऑडियो और वीडियो फाइलों को चलाने के लिए मीडिया प्लग-इन की सहायता की आवश्यकता 
होती है। 

° हाइपरलिंक्स वेब की सबसे महत्त्वपूर्ण विशेषता है- हाइपरलिंक्स से दो संसाधनों को लिक किया जा सकता है। 
ये संसाधन समान अथवा भिन्न पेज पर हो सकते हैं, समान भंडारण में अथवा विश्व में कहीं भी स्थित कम्प्यूटर 
पर हो सकते हैं। 

० हाइपरलिंक्स <॥ #7६९ = “संसाधन का स्रोत” > लिंक टैग </४> के प्रयोग से प्राप्त किए जा सकते हैं। 


° सर्वर को जानकारी देने, अनुरोध करने और इससे जानकारी प्राप्त करने के लिए फॉमों का प्रयोग किया जा सकता 
है। इससे वेब पेजों की अंतरक्रियात्मकता बढ़ जाती है। 


१ वेब पेजों को डाटाबेस से लिंक करने के अनुरोध पर विषय-वस्तु प्राप्त करने में सहायता मिलती है और सर्वर 
प्रयोक्ताओं के विशिष्ट प्रश्नों का उत्तर देते हैं और प्रश्नों के उत्तर वाले वेब पेजों का गतिज सृजन करता है। 


अभ्यास 
लघु उत्तर वाले प्रश्न 


।. निम्न की पहचान करें और उनके नाम बताएं - 
(क) टेक्स्ट को बोल्ड में करने के लिए प्रयुक्त एक भौतिक टैग और एक समकक्ष तार्किक टेग। 
(ख) टेक्स्ट को इटैलिक्स में करने के लिए एक भौतिक टैग और एक समकक्ष तार्किक टैग। 
(ग) एचटीएमएल प्रलेख तैयार करने के लिए टेक्स्ट एडीटर के रूप में प्रयुक्त होने वाली 
विन्डोज एसेसरी। 
(घ) एचटीएमएल फाइल की दो संभावित एक्सटेंशन। 
(ङ) सेक्शन ब्रेक अंतःस्थापित करने हेतु प्रयुक्त टैग। 
(च) वेब पेज में हेडिंग प्रदर्शित करने हेतु प्रयुक्त टैग। 
(छ) टेबल बनाने हेतु आवश्यक भिन्न-भिन्न टैग। 
(ज) फ्रेमसेट बनाने हेतु प्रयुक्त टैग। 
(झ) <#> टैग की अनिवार्य विशेषता। 
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(ज) उस फ्रेम (जिसमें लिंक्ड फाइल खोली जाती है) का नाम विनिर्दिष्ट करने के लिए प्रयुक्त 
<A> टैग की एक विशेषता। 

(ट) <FRAME> टैग की दो विशेषताएं जिन्हें फ्रेम बॉर्डर और फ्रेम की विषय-वस्तुओं के बीच 
व्हाइट स्पेस को नियंत्रित करने के लिए प्रयोग किया जाता है। 


निम्न शब्दों को परिभाषित करें- 

(क) www 

(ख) हाइपरटेक्स्ट 

(ग) मार्कअप 

(घ) डेफिनिशन लिस्ट 

अंतर स्पष्ट करें- 

(क) कंटेनर तथा नॉन-कंटेनर टैग्स 

(ख) टेक्स्ट एडीटर्स तथा एरछाएश6 एडीर्टर्स 

(ग) लॉजिकल तथा फिजिकल टैग्स 

(घ) <छार> तथा <P> टैग्स 

(ङ) व्यवस्थित सूची तथा अव्यवस्थित सूची 

(च) आंतरिक तथा बाह्य लिंकिंग 

(छ) <4> एंकर के रूप में तथा <^> लिंक के रूप में 

(ज) टेबल टैग की सेलपैंडिंग और सेलस्पेसिंग विशेषताएं 

(झ) <D> टैग की एलाइन (/६०) और वीएलाइन (४०।।६०) विशेषताएं 
(ज) <ाD> और <ाH> टैग 

(ट) <> और पर> टैग 

(ठ) <FRAMESET> और <FRAME> टेग 

(ड) <FRAMESET> टेग की फ्रेमबॉर्डर और बॉर्डर विशेषताएं 
निम्नलिखित एचटीएमएल कोडों में त्रुटियाँ सही करें - 


(क) <HTML> 
<T> Term Test </T> 
<BODY> 
<FONT SIZE=6>My Shopping List</FONT> 
<BREAK> 
<OL Number="A"™ START=D> 
<LI>Shoes 
<LI>Socks 
</OL> 
</BODY> 
</HTML> 


(ख) <HIML> 
<TITLE><HEAD>Using Link</TITLE></HEAD> 
<BODY> 
<A Name="#top">Links</A> 
<P>This page is an example of using links 
using the anchor tag. </P> 
<A Href="top">Goto top</A> 
</BODY> 
</HTML> 
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5. 


प्रयुक्त टैग और विशेषताओं) की पहचान करें - 

(क) ब्लैंक स्पेस, कैरिज रिटर्न इत्यादि सहित टेक्स्ट की फॉर्मेटिंग को बनाए रखने के लिए टेक्स्ट 
को मार्क-अप करना। 

(ख) ऐसी सूची बनाने के लिए जिसकी क्रमांक शैली अक्षर के रूप में हो और 'डी' अक्षर से आरंभ हो। 

(ग) वेब पेज के बैकग्राउंड के रूप में इमेज अंतःस्थापित करना। 

(घ) टेक्स्ट के लंबे खंडों को तोड़ने के लिए वेब पेज की चौड़ाई, जो कि ।0 पिक्सल मोटी 
है, के साथ-साथ एक लाइन अंतःस्थापित करने के लिए। 

(ङ) वेब पेज के भीतर लिकिंग हेतु। 

(च) लिंकिंग के लिए नाम-युक्‍्त फ्रेम तैयार करना। 

(छ) आपको वेब पेज की ही डायरेक्टरी में सुरक्षित २९5।६.॥०] नामक वेब पेज में MARKS 
नामक विशिष्ट बिन्दु का लिंक सृजित करने के लिए। 

(ज) 7 पिक्सल मोटे बॉर्डर वाली इमेज हेतु टूल टिप टेक्स्ट के रूप में 'वेलकम' प्रदर्शित 
(डिस्प्ले) करने के लिए। 

(झ) ncert@gmail.c0m को संदेश भेजने हेतु ई-मेल लिंक निर्मित करने हेतु। 

(ज) टेबल के सेल के सबसे नीचे सेल को विषय-वस्तु प्रदर्शित करने के लिए। 

(र) समग्र टेबल के बैकग्राउंड को कलर करने के लिए। 

(ठ) टेबल के सेल में टेक्स्ट को बोल्ड अक्षरों में विनिर्दिष्ट करने हेतु। 

(ड) टेबल के कैप्शन को टेबल के सबसे नीचे रखने के लिए। 


दीर्घ उत्तर वाले प्रश्‍न 
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वेब पेज निर्मित करने में एचटीएमएल को भूमिका विस्तार से बताएं। 


कथन का औचित्य सिद्ध करें- ''एचटीएमएल वेब पेजों को हमेशा केवल टेक्स्ट फाइलों के रूप 
में सुरक्षित किया जाता है।'' 


एचटीएमएल प्रलेख की संरचना उदाहरण सहित विस्तार से बताएं। 


कमेंट क्या है? आप एचटीएमएल प्रलेख में कमेंट कैसे जोड़ते हैं? उदाहरण की सहायता से विस्तार 
से बताएं। 


<Frameset> टैग का उपयोग क्या है? 
टैग <A> की TARGET विशेषता का उपयोग विस्तार से बताएं। 
<FRAME> ग की $2८ विशेषता का महत्त्व क्या हे? 


निम्न कोड का आउटपुट बताएं- 


(क) <HTML> 
<FRAMESET COLS=20%, *> 
<FRAME NAME="F Il" SRC="a.htm”> 
<FRAMESET ROWS=50%,*> 
<FRAME NAME="F2" SRC=" b.htm”> 
<FRAME NAME="F3" SRC=" c.htm”> 
</FRAMESET></FRAMESET> 
</HTML> 
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(ख) <HIML> 
<BODY> 

TABLE CELLSPACING="4" CELLPADDING="6™ ALIGN="CENTER” BORDER="3"> 

CAPTION ALIGN="TOP"><CENTER><B>MARK LIST</B></CENTER></CAPTION> 

TR VALIGN="MIDDLE”> 

TH>NAME</TH> 


























TH>MARKS</TH> 

TH>PERCENTAGE</TH> 
/TR> 
TR VALIGN="MIDDLE”> 
TD>MEGHA</TD> 





TD>48/50</TD> 

TD VALIGN="BOTTOM”>96%</TD> 
/TR> 

TR ALIGN="MIDDLE” > 
TD>TARUN</TD> 

TD>lI5/50</TD> 

TD>28%</TD> 
/TR> 

TR ALIGN="CENTER"> 

TD>VARUN< /TD> 

TD ALIGN="RIGHT” VALIGN="TOP” BGCOLOR="YELLOW”>42/50</TD> 
TD>84%</TD> 

</TR> 

</TABLE> 

</BODY> 

</HTML> 
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विभिन्न लाइनों पर किन्हीं 5 विषयों के नाम प्रदर्शित करने हेतु एचटीएमएल कोड लिखें (<> टैगों का प्रयोग 
करें)। <B> टैगों को <P> टैगों में बदलें और परिवर्तन नोट करें। फिर, नामों को उनके समक्ष संख्या के साथ 
प्रदर्शित करने का प्रयास करें। अंततः संख्याओं को बुलेट में बदलें। 

टैगों की नेस्टिंग को दर्शाने हेतु एचटीएमएल कोड लिखें। नेस्टिंग क्रम में परिवर्तन करें और देखें कि क्या इससे 
आउटपुट में कोई अंतर आता है। 

निम्नलिखित वेब पेज के लिए एचटीएमएल कोड लिखें- 





* बी की सूची 
]. विज्ञान 


(क) बायोलॉजी (जीव विज्ञान) 
]. बॉटनी (वनस्पति विज्ञान) 
2. जूलोजी (जन्तु विज्ञान) 
(ख) रसायन शास्त्र 
।. जैविक 
2. अजैविक 
3. भौतिक 
(ग) भौतिक शास्त्र 
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इ | सामाजिक विज्ञान 
(क) भूगोल 
(ख) समाजशास्त्र 


(ग) इतिहास 
(घ) अर्थशास्त्र 





4. नोट पैड फाइल में निम्न कोड को टाइप करके तथा आउटपुट को देखकर क्षेतिज लाइनों के बारे में जानें। आकार 
(साइज) सरेखण और रंग विकल्पों को बदलकर अन्य भिन्नताओं को देखें। 


<HTML> 

<TITLE> Home Page </TITLE> 

<BODY BACKGROUND="bg.gif”> 

<!— A website created bout famous Cartoon Characters—> 
What is a Cartoon?<BR> 

<HR WIDTH = 50% ALIGN=LEFT SIZE=5 NOSHADE > 

<HR SIZE = 8 COLOR = “blue”> 

<HR WIDTH = 50% ALIGN=RIGHT SIZE=5 COLOR="REDE> 

<P>A cartoon is any of several forms of illustrations 
with varied meanings. 

</BODY> 

</HTML> 





5. निम्न वेब पेज निर्मित करने हेतु एचटीएमएल कोड लिखें। 


पदार्थ की अवस्थाएं 
पदार्थ की तीन अवस्थाएं होती हैं- 
ठोस - उदाहरण : पेंसिल 


तरल - उदाहरण : पानी 
गैस - उदाहरण : वायु 
गैस ठोस तथा तरल से हल्की होती है। 





6. अपने मनपसंद शौक के बारे में निम्नवत्‌ विशेषताओं का प्रयोग करते हुए एक वेबसाइट (कम से कम दो 
पेज की) डिजाइन करने के लिए एचटीएमएल कोड लिखें- 
0) प्रत्येक पेज पर समुचित शीर्षक होने चाहिए। 
(0) हेडिंग पेज पर स्क्रॉल करनी चाहिए। 
6#) वेब पेज के बैकग्राउंड के रूप में समुचित इमेज अंतःस्थापित करें। 
(४) पेज की हेडिंग लाल रंग में तथा 'एरियल' शैली में होनी चाहिए। यह रेखांकित तथा दाई ओर सरेखित 
होनी चाहिए। 
(”) पहले पेज पर जानकारी पेराग्राफ में होनी चाहिए जिसमें प्रत्येक का रंग तथा सरेखण निम्न हो। 
(५) दूसरे पेज पर उस क्षेत्र के प्रसिद्ध पर्यटन स्थलों की सूची होनी चाहिए। 
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7.  निम्नवत्‌ दर्शाई गई आउटपुट को विशिष्ट क्रमांकों सहित तैयार करने हेतु एचटीएमएल कोड लिखें- 


Multimedia and Web Technology Course Contents - Windows Int... ERs] E] 


लालाला 
= 





8. निम्न दर्शाई गई आउटपुट को तैयार करने हेतु एचटीएमएल कोड लिखें (मानें कि फाइल का नाम है ॥॥०७४९7.]?६)। 


I0. 





जहि सपने जो हम देखते हैं। 


आपके सबसे प्रिय मित्र ने ण: www.tipod.com/personal/cooldude.him! के द्वारा वेब पेज तैयार 
किया है। अब आप इस वेब पेज को लिंक करना चाहते हैं और आप अपने वेब पेज पर लगी अपने मित्र की 
फोटो पर क्लिक करते हैं। मानें कि आपके मित्र की फोटो जिस फाइल में है उसका नाम है- “८:\ 


mypicture\myfriend.jpg?. 
निम्न आउटपुट प्राप्त करने के लिए एचटीएमएल कोड लिखें- 


औसत 
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]. निम्न आउटपुट प्राप्त करने के लिए एचटीएमएल कोड लिखें (मानें कि इमेज के नाम क्रमशः hill.jpg, sea.jpg 
और ७९7.7६ हैं)। 





।2. आपके स्कूल का वेब पता है %/-६।।९०८०५.८०. आप अपने वेब पेज से इस वेबसाइट को लिंक करना 
चाहते हैं। ऐसा करने के लिए एचटीएमएल कोड लिखें? 


3. निम्न पेज तैयार करने के लिए एचटीएमएल कोड लिखें- 





ते विद्यालय" का पुस्तकालय 


मेरे विद्यालय में एक बड़ा सा पुस्तकालय 
है जिसमें बहुत सारी किताबें हैं। 
उपलब्ध पुस्तकों की सूची देखने के लिए 
किसी भी एक श्रेणी पर क्लिक करें- 
।. नाटक 
° रहस्य 
* हास्य 
° ड्रामा 
2. संदर्भ पुस्तकें 
° विज्ञान 
° गणित 
° सामाजिक विज्ञान 















कम्प्यूटर और संचार प्रौद्योगिकी 


कहर भाषाएं 
* हिन्दी 
* अंग्रेजी 
° संस्कृत 
: निम्न प्रकार से पेज लिंक किए गए (यह मानते हुए कि फाइलें पहले से मौजूद हैं लिंक स्थापित करें) 
° नाटक से “८.0” के रूप में 

° संदर्भ पुस्तकों से “7€£.॥७I” के रूप में 

° भाषा संबंधी पुस्तकों से ०78.-0077” के रूप में 
4. निम्नवत्‌ फ्रेमसेट्स तैयार करने हेतु एचटीएमएल कोड लिखें- 
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